Skip to content
zedkit
@zedtech/zedkit-ui

WizardSteps

Step indicator plus selectable option cards with state.

Stable@zedtech/zedkit-ui

Wraps: none (native inputs + theme tokens)

Step 1 of 3 · Products

View props table
Who is it for?
Developers building onboarding, setup, or checkout flows.
When should I use it?
For 2–6 step flows with choices per step.
When should I pick something else?
For single forms — use Form instead of inventing steps.

Use it

Examples import from the package. With copied source, import from @/components/ui/wizard-steps instead.

Simple
import { OptionCards, WizardSteps } from "@zedtech/zedkit-ui";
const [picked, setPicked] = useState(["a", "b"]);
<WizardSteps steps={["Pick", "Configure", "Test"]} current={0} />
<OptionCards options={options} selected={picked} onChange={setPicked} />

Composed steps

  1. Cart
  2. Delivery
  3. Payment
  4. Confirmation

Checkout: payment is the current step; the confirmation comes after.

import { Wizard, WizardStep } from "@zedtech/zedkit-ui";
<Wizard>
  <WizardStep step="Pick" index={0} state="done" showConnector />
  <WizardStep step="Configure" index={1} state="current" />
</Wizard>

Solo card

You will receive the digest.

import { OptionCard } from "@zedtech/zedkit-ui";
const [solo, setSolo] = useState(false);
<OptionCard title="Solo option" checked={solo} onChange={() => setSolo(!solo)} />

Pick one

Delivery: Standard.

import { OptionCards } from "@zedtech/zedkit-ui";
const [delivery, setDelivery] = useState(["standard"]); // always one id
<OptionCards multiple={false} label="Delivery" options={options} selected={delivery} onChange={setDelivery} />

Kit not installed yet?

You get
Every component from one import, with the theme tokens included. Updates arrive with your package manager.
You need
  • React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. Load the styles

    Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

    src/app/globals.cssReplace the contents
    @import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

  3. Pick a look

    Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

    src/app/layout.tsxReplace the contents
    import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

  4. Load the fonts

    The Glass look uses Inter and Space Grotesk; these imports self-host them.

    src/app/fonts.tsCreate the file
    import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";

  5. Import and render

    src/app/page.tsxReplace the contents
    import { Wizard, WizardStep } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Wizard>
        <WizardStep step="Pick" index={0} state="done" showConnector />
        <WizardStep step="Configure" index={1} state="current" />
      </Wizard>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

List carries aria-label="Progress"; current step gets aria-current="step". Cards are native checkboxes in labels; with multiple={false} they are native radios in a radiogroup, one name per group, arrow keys move the choice.

Troubleshooting

Steps stuck done/todo — `current` is a 0-based index; past the last step everything reads done. Missing connector — composed `WizardStep` rows show one only with `showConnector` (automatic in `WizardSteps`).

SidebarNavItem

One row for status, title, recency (`meta`), quantity (`count`), and active; groups collapse with native disclosure.

Stack

Gap-based vertical/horizontal stacks plus titled sections, with optional proximity scroll-snap. Gaps are role-named only.

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelatedTroubleshooting