nalarx-uiComponents
Steps
Ordered steps joined by one line, for recommended actions, a plan or a schedule.
bunx shadcn@latest add @nalarx/stepsUsage
Set it on a card surface: the number badges wear the badge's sunken face, which all but vanishes on the bare page background.
import { Steps } from "@/components/ui/nx/Steps";
<Steps
title="Recommended actions"
steps={[
{ title: "Connect the sales database", detail: "Read-only access is enough." },
{ title: "Ask a first question" },
]}
/>When any step has a marker (a day or a time), it becomes a schedule: markers line up in a column left of the line, every step shows a ring instead of a number, and current fills the ring of the step under way.
Numbered, and a schedule with its second step current:
Recommended actions
- Connect the sales databaseRead-only access is enough.
- Pick the tables the agent may read
- Ask a first questionFor example: revenue by region last month.
- MonCollect last week's orders
- TueReconcile paymentsUnder way.
- WedSend the summary
Recommended actions
- Connect the sales databaseRead-only access is enough.
- Pick the tables the agent may read
- Ask a first questionFor example: revenue by region last month.
- MonCollect last week's orders
- TueReconcile paymentsUnder way.
- WedSend the summary
Keyboard
Nothing to operate: it is an ordered list (<ol>), read in order. Numbers, rings and the line are hidden from screen readers; the list order carries the sequence.
Props
| Prop | Type | |
|---|---|---|
steps | { title, detail?, marker? }[] | Renders nothing when empty. |
title | ReactNode | A heading above the list (<h3>). |
current | number | Index of the step under way; schedules only. |
className | string | On the root. |
Replaces
Web NxSteps.tsx (NxSteps, NxStep). The facade keeps NxSteps.