Stepper
Detail Steps
Vertical steps with a one-line summary on each and an expanded detail panel on the current one — details show only once their turn has come.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the steps array: title, one-line summary and optional details
- current — the index of the active step, counting from zero
- the accent through the accent prop — it colours completed circles and the panel
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/stepper-010?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Stepper010
current={2}
label="Store migration"
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Current step
current· default: 2- Screen reader name
label· default: Store migration- Accent
accent· default: theme colour- Background
background· default: theme colour
More in Stepper
FAQ
- How do I add Detail Steps with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Detail Steps depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Detail Steps?
- Adapt: the steps array: title, one-line summary and optional details; current — the index of the active step, counting from zero; the accent through the accent prop — it colours completed circles and the panel. Keep as installed: the local --vibeui-stepper-010-* palette — do not swap it for your theme tokens; the detail panel on the current step only: finished and upcoming steps do not need details at the same time; aria-current="step" on the current step: without it the detail panel has nothing to attach to.
- Is Detail Steps free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/stepper-010.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
The component is self-contained: one file, zero dependencies, the palette in the --vibeui-stepper-010-* variables. Server component: no hooks. The circle is stretched across all of the item's rows through grid-row: 1 / span 3, so the row height is not tied to the amount of text; the 1 / -1 form does not work here — the item has no explicit rows, so -1 resolves to the very first line and the text falls into the circle column. The detail panel is a separate data-part="panel" block, rendered only when the step's state is current and it has a details array; on the other steps only the title and a one-line summary are visible. The current step is marked aria-current="step", and the state is duplicated by a word next to the title.
Tags
- stepper
- vertical
- details
- onboarding
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…