Callout Figure Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-callout-figure

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

Usage

tsx

import { FeatureCalloutFigure } from '@/components/blocks/feature-callout-figure'

Exampletsx

import { FeatureCalloutFigure } from '@/components/blocks/feature-callout-figure'

export default function FeatureCalloutFigureDemo() {
  return (
    <FeatureCalloutFigure
      eyebrow="Release train"
      heading="Every claim points at a pixel."
      description="Meridian’s deploy board ships as a single framed surface. The callouts below map each capability to the exact row an operator reads at ship time."
      figure={{
        title: 'deploy · board',
        rows: [
          { label: 'Pipeline', value: 'main → edge', state: 'success' },
          { label: 'Region set', value: 'iad · fra · syd' },
          { label: 'Canary share', value: '8%' },
          { label: 'Health gate', value: 'pass', state: 'success' },
          { label: 'Rollback window', value: '12 min' },
          { label: 'Signed artifacts', value: 'cosign', state: 'success' },
        ],
      }}
      callouts={[
        {
          row: 0,
          title: 'One pipeline, three edges',
          body: 'Promotion is a single job that fans out to every edge region after the canary clears its error budget.',
        },
        {
          row: 2,
          title: 'Canary with a hard cap',
          body: 'Traffic share is locked in config, not a dashboard slider, 8% is the max until the gate flips green.',
        },
        {
          row: 3,
          title: 'Health gate before promote',
          body: 'p99 latency and error rate must stay under budget for three consecutive windows or the train stops.',
        },
        {
          row: 5,
          title: 'Artifacts are signed',
          body: 'Every image and bundle carries a cosign signature verified at the edge before traffic moves.',
        },
      ]}
    />
  )
}

API reference

FeatureCalloutFigure accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`figure`*	`FeatureCalloutFigureFigure`	–	–
`callouts`*	`FeatureCalloutFigureCallout[]`	–	–

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

Referenced types

Typestsx

export interface FeatureCalloutFigureFigure {
  title: string
  rows: FeatureCalloutFigureRow[]
}

export interface FeatureCalloutFigureCallout {
  /** zero-based index of the figure row this marker anchors to */
  row: number
  title: string
  body: string
}

export interface FeatureCalloutFigureRow {
  label: string
  value: string
  state?: 'default' | 'success'
}

Related components

Layer Stack Features

Architecture layer stack for React product pages, skewed Tailwind planes pile the system into a flat axonometric diagram, each layer wired to a margin note.

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.

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.

Inventory Wall Features

The everything-included wall for React landing pages, dozens of small capability chips grouped under mono Tailwind labels with counts, breadth made visible in one ruled sweep.

Frequently asked questions

How do I install the Callout Figure Features 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-callout-figure`. 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 Callout Figure Features require?

Callout Figure Features 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 Callout Figure Features 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