Steps Path

Installation

pnpm dlx shadcn@latest add @cleverui/feature-steps-path

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { FeatureStepsPath } from '@/components/blocks/feature-steps-path'

Exampletsx

import { FeatureStepsPath } from '@/components/blocks/feature-steps-path'

export default function FeatureStepsPathDemo() {
  return (
    <FeatureStepsPath
      eyebrow="Implementation"
      heading="From kickoff to first close in four measured steps."
      steps={[
        {
          kicker: 'Week 1',
          title: 'Connect your stack',
          body: 'Read-only connectors for NetSuite, QuickBooks, and your inbox. No agents write until you promote a policy pack.',
        },
        {
          kicker: 'Week 2',
          title: 'Map the chart',
          body: 'We import cost centers and vendor aliases, then dry-run three months of historical invoices against your tolerances.',
        },
        {
          kicker: 'Week 3',
          title: 'Shadow match',
          body: 'The engine proposes matches beside your existing process. Controllers accept or reject, every decision trains the next week.',
        },
        {
          kicker: 'Week 4',
          title: 'Promote to live',
          body: 'Flip write-back on for approved vendors only. Nightly close assist starts the following business day at 07:00 local.',
        },
      ]}
    />
  )
}

API reference

FeatureStepsPath accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`steps`*	`StepsPathStep[]`	–	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface StepsPathStep {
  title: string
  body: string
  kicker?: string
}

Related components

Orbit Map Features

A central product node with feature satellites wired by hairline SVG edges that draw themselves in, every node is real content, the architecture made visible.

Pinned Rail Features

Sticky narrative column on the left while feature cards scroll past on the right, the copy holds the argument as the evidence flows. Scrollytelling without the framework.

Accordion Stage

Feature accordion synced to a stage, expanding a row swaps the token-built preview beside it, one open at a time, height animated without jank.

Before After Strip

A narrow strip pairing the old way against your product in two mirrored quiet columns, each pain struck through as its counterpart lands with a check.

Bento Feature Grid

A bento grid drawn like a drafting table, tiles share single hairline seams instead of floating as glow cards. Staggered reveal, quiet hover shift, wide and tall spans.

Callout Figure Features

Annotated product figure for React marketing pages, numbered leader lines tie a token-built Tailwind mock to margin notes, so every feature claim points at the pixel it explains.

Frequently asked questions

How do I install the Steps Path component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/feature-steps-path`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Steps Path require?

Steps Path uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Steps Path to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code