Skip to content
Ordermatic Docs

Flow & disclosure

Primitives for multi-step flows, progressive disclosure, and onboarding.

Live

Section titled “Live”
  1. ✓Intake
  2. 2Review
  3. 3Submit

Stepper

Section titled “Stepper”
import Stepper from '@repo/ui/Stepper';


<Stepper current={1} steps={[{ id: 'intake', label: 'Intake' }, { id: 'review', label: 'Review' }]} />

Horizontal step indicator — earlier steps render complete (✓), the current step is orange and marked aria-current="step". Presentational; pair it with your own wizard content.

Accordion

Section titled “Accordion”
import Accordion from '@repo/ui/Accordion';


<Accordion type="single">
  <Accordion.Item value="a" title="How does extraction work?">…</Accordion.Item>
</Accordion>

On Radix Accordion (keyboard + ARIA). type="single" (collapsible) or "multiple".

Coachmark

Section titled “Coachmark”
import Coachmark from '@repo/ui/Coachmark';


<Coachmark open={open} onOpenChange={setOpen} title="Triage from here" body="…" step="1 of 3"
  action={<Button onClick={next}>Got it</Button>}>
  <TargetElement />
</Coachmark>

An onboarding callout anchored to a target (Radix Popover). Ink-on-orange so it stands out while staying AA-legible (white-on-orange would fail contrast). Controlled open.