Tabbed Feature Stage

Installation

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

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

Usage

tsx

import { FeatureTabsStage } from '@/components/blocks/feature-tabs-stage'

Exampletsx

import { FeatureTabsStage } from '@/components/blocks/feature-tabs-stage'

export default function FeatureTabsStageDemo() {
  return (
    <FeatureTabsStage
      eyebrow="Product surface"
      heading="One console. Three modes of work."
      tabs={[
        {
          label: 'Pipeline',
          title: 'See every open match at once',
          body: 'A live queue of invoices against POs and receipts. Filter by vendor risk, aging, or cost center, promote batches when they clear.',
          rows: [
            { label: 'In queue', value: '128' },
            { label: 'Ready to post', value: '91', state: 'success' },
            { label: 'Needs review', value: '37' },
            { label: 'Avg age', value: '1.4 d' },
          ],
        },
        {
          label: 'Matching',
          title: 'Tolerance-aware three-way match',
          body: 'Rules travel with the line: freight bands, quantity variance, and dual-approval thresholds. Overrides leave a signed trail.',
          rows: [
            { label: 'PO-4821', value: 'Matched', state: 'success' },
            { label: 'PO-4902', value: 'Freight +2.1%' },
            { label: 'PO-4910', value: 'Matched', state: 'success' },
            { label: 'Hit rate (7d)', value: '96.4%', state: 'success' },
          ],
        },
        {
          label: 'Permissions',
          title: 'Agents with named least privilege',
          body: 'Every automation runs as a scoped identity. Revoke a token and in-flight work freezes cleanly, no cascading writes.',
          rows: [
            { label: 'match-runner', value: 'write:ledger', state: 'success' },
            { label: 'exception-router', value: 'read:docs' },
            { label: 'nightly-close', value: 'write:close' },
            { label: 'Last audit', value: '2h ago', state: 'success' },
          ],
        },
        {
          label: 'Exports',
          title: 'Audit packs that stand alone',
          body: 'Seal a close window into a signed pack: decisions, overrides, and source hashes. Hand it to auditors without a screen share.',
          rows: [
            { label: 'Mar close pack', value: 'Ready', state: 'success' },
            { label: 'Entries', value: '2,841' },
            { label: 'Overrides', value: '6' },
            { label: 'Hash chain', value: 'Intact', state: 'success' },
          ],
        },
      ]}
    />
  )
}

API reference

FeatureTabsStage accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`tabs`*	`FeatureTabsStageTab[]`	–	–

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

Referenced types

Typestsx

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

Related components

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.

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 Tabbed Feature 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-tabs-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 Tabbed Feature Stage require?

Tabbed Feature 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 Tabbed Feature 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