Accordion Stage

Installation

pnpm dlx shadcn@latest add @cleverui/feature-accordion-stage

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

Usage

tsx

import { FeatureAccordionStage } from '@/components/blocks/feature-accordion-stage'

Exampletsx

import { FeatureAccordionStage } from '@/components/blocks/feature-accordion-stage'

export default function FeatureAccordionStageDemo() {
  return (
    <FeatureAccordionStage
      eyebrow="How the ledger works"
      heading="Every inbound dollar, matched before it lands."
      items={[
        {
          title: 'Three-way match',
          body: 'Purchase orders, receiving notes, and invoices settle against each other in the same pass, exceptions surface only when the numbers disagree by more than your tolerance.',
          stage: {
            title: 'Match queue · PO-4821',
            rows: [
              { label: 'PO total', value: '$18,420.00', state: 'success' },
              { label: 'Received', value: '40 × SKU-91', state: 'success' },
              { label: 'Invoice delta', value: '$0.00', state: 'success' },
              { label: 'Tolerance', value: '±0.5%' },
            ],
          },
        },
        {
          title: 'Exception desk',
          body: 'Mismatches queue to the right owner with the full document trail attached. Approvals write back to the source system, no rekeying.',
          stage: {
            title: 'Exceptions · open',
            rows: [
              { label: 'Freight variance', value: '3 open' },
              { label: 'Qty mismatch', value: '1 open' },
              { label: 'Avg resolve time', value: '11 min' },
              { label: 'Auto-cleared today', value: '47', state: 'success' },
            ],
          },
        },
        {
          title: 'Audit replay',
          body: 'Every decision is a first-class event. Replay any night’s close line by line, or export a signed pack for your auditor in one click.',
          stage: {
            title: 'Replay · 2026-03-12',
            rows: [
              { label: 'Entries settled', value: '2,841', state: 'success' },
              { label: 'Manual overrides', value: '6' },
              { label: 'Export pack', value: 'Ready', state: 'success' },
              { label: 'Hash chain', value: 'Intact', state: 'success' },
            ],
          },
        },
        {
          title: 'Scoped agents',
          body: 'Automations run as named identities with least-privilege tokens. Revoke one agent and its open work freezes cleanly, nothing cascades.',
          stage: {
            title: 'Agents · production',
            rows: [
              { label: 'match-runner', value: 'Active', state: 'success' },
              { label: 'exception-router', value: 'Active', state: 'success' },
              { label: 'nightly-close', value: 'Idle' },
              { label: 'Last revoke', value: '14d ago' },
            ],
          },
        },
      ]}
    />
  )
}

API reference

FeatureAccordionStage accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`items`*	`AccordionStageItem[]`	–	–

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

Referenced types

Typestsx

export interface AccordionStageItem {
  title: string
  body: string
  stage: {
    title: string
    rows: {
      label: string
      value: string
      state?: 'default' | 'success'
    }[]
  }
}

Related components

Tabbed Feature Stage

Feature tabs with a live stage, switching tabs morphs a token-built product panel between states, with the active tab carried by a sliding thumb.

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.

Ledger List Features

Features as a ruled ledger, mono index, name, and one-line value statement per row with a right-aligned shipped/beta status. Dense, scannable, no grid.

Metrics Fusion Features

Feature rows fused with proof, every capability carries its own counting mini-stat in tabular figures, so the claim and its evidence share one line.

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 Accordion Stage 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-accordion-stage`. 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 Accordion Stage require?

Accordion Stage uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Accordion Stage 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