Features Steps
Numbered how-it-works steps joined by a line that draws itself as the section scrolls in.
- Type: Features section
- Styles: Minimal, Light
- Licence: Charcoal UI Pro
About Features Steps
Features Steps explains your process in three numbered steps. As the section scrolls in, a line draws across from step to step and each card rises in turn, with a small detail like a time or price under each one.
It is a full-width features section for React and Tailwind CSS 4, in a minimal and light style. Preview it at any width above, then install it with one command.
When to use Features Steps
- Onboarding and setup explanations.
- Agency and service processes.
- Marketplaces and booking flows.
- Course and bootcamp curricula.
How it is built
The connecting line is an SVG with pathLength animated in view, icons are numbered automatically, and it collapses to a vertical list on phones.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Features Steps
Features Steps is part of 19 full templates, so you can see it in a finished page.
- Relay template: Status updates that write themselves.
- Tessera template: Every meeting, already written up.
- Cadence template: Book meetings without the back-and-forth.
- Lane template: Catch the bug in review, not in prod.
- Keystone template: Login, done in an afternoon.
- Fieldwork template: Senior engineers, on retainer.
- Roastery template: Build a box, save every delivery.
- Lumi template: Drag the slider, buy the app.
- Fixwell template: Book a pro in two minutes.
- Brightside template: A dentist people don't dread.
- Harbor template: Payroll in ten minutes a month.
- Paperclip template: Get paid faster, freelancer.
- Rota template: Shift planning, built by nurses.
- Carebridge template: See a doctor today, from your sofa.
- Kindred template: Find a therapist you actually click with.
- Forkcamp template: From zero to hired in 16 weeks.
- Sprout template: Coding classes kids beg to go to.
- Tutorly template: The right tutor, this week.
- Pocket template: Launch an app, get the downloads.
- Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
- Features Bento: A React bento features section where every tile is a working component
- Features Alternating: A free React alternating features section: image and text rows that slide in
- Features Tabs: React feature tabs that auto-advance with a progress bar and swap visuals
Install Features Steps
npx shadcn@latest add @charcoal/features-stepsFeatures Steps is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Features Steps work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.