Metrics Fusion Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-metrics-fusion

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

Usage

tsx

import { FeatureMetricsFusion } from '@/components/blocks/feature-metrics-fusion'

Exampletsx

import { GitBranch, ShieldCheck, Timer, Workflow } from 'lucide-react'
import { FeatureMetricsFusion } from '@/components/blocks/feature-metrics-fusion'

export default function FeatureMetricsFusionDemo() {
  return (
    <FeatureMetricsFusion
      eyebrow="Measured in production"
      heading="Every claim ships with a number."
      description="Fieldnote runs the operational layer for product teams. These figures are medians from the last 90 days across paying workspaces."
      features={[
        {
          icon: Timer,
          title: 'Deploy to production',
          body: 'Push merges through review gates and canary checks without a release manager in the loop.',
          stat: {
            value: 48,
            suffix: 's',
            label: 'median deploy time',
          },
        },
        {
          icon: Workflow,
          title: 'Cross-tool handoffs',
          body: 'Work advances from Linear to GitHub to PagerDuty as stages complete, no status meetings to keep the board honest.',
          stat: {
            value: 12.4,
            suffix: 'k',
            decimals: 1,
            label: 'handoffs per week',
          },
        },
        {
          icon: ShieldCheck,
          title: 'Policy-checked writes',
          body: 'Every mutation is evaluated against your published policy pack before it lands in the system of record.',
          stat: {
            value: 99.98,
            suffix: '%',
            decimals: 2,
            label: 'policy pass rate',
          },
        },
        {
          icon: GitBranch,
          title: 'Incident replay',
          body: 'Reconstruct any failed run from the audit ledger in one click, same inputs, same tools, full timeline.',
          stat: {
            value: 3.2,
            suffix: 'min',
            decimals: 1,
            label: 'median time to root cause',
          },
        },
      ]}
    />
  )
}

API reference

FeatureMetricsFusion accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`features`*	`FeatureMetricsFusionItem[]`	–	3–5 rows; claim + counting evidence on one line

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

Referenced types

Typestsx

export interface FeatureMetricsFusionItem {
  icon?: LucideIcon
  title: string
  body: string
  stat: FeatureMetricsFusionStat
}

export interface FeatureMetricsFusionStat {
  value: number
  prefix?: string
  suffix?: string
  decimals?: number
  /** evidence caption, e.g. 'median deploy time' */
  label: string
}

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.

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.

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 Metrics Fusion 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-metrics-fusion`. 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 Metrics Fusion Features require?

Metrics Fusion 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 Metrics Fusion 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