Wizard

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/wizard
Copy

Usage

Copyimport { Wizard } from "@/components/ui/wizard";

Copy<Wizard
  steps={[
    {
      key: "install",
      title: "Install",
      content: <Text>Install dependencies</Text>,
    },
    {
      key: "configure",
      title: "Configure",
      content: <Text>Set up your preferences</Text>,
    },
    {
      key: "finish",
      title: "Finish",
      content: <Text>Review and confirm your settings</Text>,
    },
  ]}
  onComplete={(keys) => console.log("Completed:", keys)}
  onCancel={() => console.log("Cancelled")}
/>

API Reference

Wizard

WizardStep

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

• Keyboard: Arrow keys move inside the composite; Home / End select the first or last enabled item; Enter / Space activate, select, or toggle; Escape cancels or closes an owned surface; Tab / Shift+Tab move between termcn/Ink focus targets.
• Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
• Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.