Components / Content

Steps

Numbered steps in a hairline grid.

Extracted fromMarketing site

Import

tsx
import { Steps } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Steps } from "@somnia-chain/ui/next"

Examples

Three steps

  1. 01

    Sign in

    Create a Somnia Explorer account with a wallet or email.

  2. 02

    Create a venue

    Pick markets, fees and a brand. Venue Kit deploys the contracts.

  3. 03

    Go live

    Point your domain at the venue and start trading.

examples/steps/default.tsxShow code
tsx
import { Steps } from "@somnia-chain/ui"

export default function StepsExample() {
  return (
    <Steps
      steps={[
        { title: "Sign in", body: "Create a Somnia Explorer account with a wallet or email." },
        { title: "Create a venue", body: "Pick markets, fees and a brand. Venue Kit deploys the contracts." },
        { title: "Go live", body: "Point your domain at the venue and start trading." },
      ]}
    />
  )
}