Steps
Progress through a multi-step flow: connectors fill, finished steps draw a check, and the current one pulses ember.
- Category: Navigation
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Steps
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
steps | { title: string; description?: string }[] | — | |
current | number | — | Zero-based. |
About Steps
Steps shows progress through a multi-step flow: connectors fill as you advance, finished steps draw a check, and the current one pulses in the accent colour. Users always know how far they have come.
Steps is a navigation component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Steps
- Checkout and onboarding flows.
- Multi-page forms and wizards.
- Setup guides and installers.
- Order and delivery tracking.
How it works
Each step is a list item with its state announced, the current one marked with aria-current. The check is an SVG path that draws in, and connectors are scale transforms that fill toward the next step.
Links and buttons keep their roles, arrow keys move where a group is expected, the current item is marked with aria-current, and focus is always visible. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Steps
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
Style it with className like any other element. It only uses your theme's tokens, so it follows light and dark mode without extra work.
- steps.
- current (number): Zero-based.
Goes well with Steps
Steps is already composed into a ready-made section, so you can see it in context or install the whole block.
- CTA Steps: CTA section
- Tabs: Animated React tabs with a gliding indicator and panels that slide the way you travel
- Breadcrumb: An animated React breadcrumb that folds long trails and unfolds them on click
- Pagination: Animated React pagination with smart gaps and a pill that glides to the current page
- Sidebar: A collapsible React app sidebar with spring width, fading labels and an active marker
- Dropdown Menu: An animated React dropdown menu with icons, shortcuts, checkboxes and keyboard control
Install Steps
npx shadcn@latest add https://charcoalui.com/r/steps.jsonSteps is free and MIT licensed. The command copies steps.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Scroll Text, a Pro piece: Words light up one by one as the paragraph scrolls through the viewport.
Frequently asked questions
- How do I install Steps?
- Run npx shadcn@latest add https://charcoalui.com/r/steps.json. The shadcn CLI copies steps.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Steps free for commercial use?
- Yes. Steps is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Steps work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Steps?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Steps's props and source and get_install_command returns the exact command.