Spec Sheet Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-spec-sheet

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

Usage

tsx

import { FeatureSpecSheet } from '@/components/blocks/feature-spec-sheet'

Exampletsx

import { FeatureSpecSheet } from '@/components/blocks/feature-spec-sheet'

export default function FeatureSpecSheetDemo() {
  return (
    <FeatureSpecSheet
      eyebrow="Technical reference"
      heading="Fieldnote Core, published numbers."
      description="Measured on the production control plane, not a synthetic demo cluster. Limits are contractual; latencies are p99 over rolling 30-day windows."
      sections={[
        {
          label: 'Latency & throughput',
          specs: [
            {
              term: 'Write path p99',
              value: '4 ms p99',
              detail: 'Policy eval included, same region',
              featured: true,
            },
            {
              term: 'Webhook delivery',
              value: '180 ms p99',
              detail: 'Signed POST, first attempt',
            },
            {
              term: 'Sustained ingest',
              value: '12k events/s',
              detail: 'Per workspace, auto-sharded',
            },
            {
              term: 'Replay restore',
              value: '< 90 s',
              detail: 'Median for 24h workflow history',
            },
          ],
        },
        {
          label: 'Compliance & tenancy',
          specs: [
            {
              term: 'Certification',
              value: 'SOC 2 Type II',
              detail: 'Annual audit, report on request',
            },
            {
              term: 'Data residency',
              value: 'US · EU · AU',
              detail: 'Pinned at workspace creation',
            },
            {
              term: 'Isolation model',
              value: 'Logical + network',
              detail: 'Per-tenant worker allowlists',
            },
            {
              term: 'Retention default',
              value: '90 days',
              detail: 'Configurable up to 7 years',
            },
          ],
        },
        {
          label: 'Platform limits',
          specs: [
            {
              term: 'Concurrent runs',
              value: '2 000',
              detail: 'Per workspace soft cap',
            },
            {
              term: 'Tool timeout',
              value: '120 s',
              detail: 'Hard kill after grace',
            },
            {
              term: 'Payload ceiling',
              value: '16 MB',
              detail: 'Per event, compressed on wire',
            },
          ],
        },
      ]}
      titleBlock={[
        { label: 'REV', value: 'C4' },
        { label: 'ISSUED', value: '2026-07' },
        { label: 'DOC', value: 'FN-CORE-SPECS' },
        { label: 'STATUS', value: 'PUBLIC' },
      ]}
    />
  )
}

API reference

FeatureSpecSheet accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`sections`*	`FeatureSpecSheetSection[]`	–	2–4 sections of 3–6 term/value pairs
`titleBlock`	`FeatureSpecSheetTitleField[]`	–	2–4 mono field pairs for the drawing-style title block

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

Referenced types

Typestsx

export interface FeatureSpecSheetSection {
  label: string
  specs: FeatureSpecSheetSpec[]
}

export interface FeatureSpecSheetTitleField {
  label: string
  value: string
}

export interface FeatureSpecSheetSpec {
  term: string
  value: string
  detail?: string
  /** at most one featured spec across the whole sheet */
  featured?: boolean
}

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.

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.

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.

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.

Frequently asked questions

How do I install the Spec Sheet 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-spec-sheet`. 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 Spec Sheet Features require?

Spec Sheet Features 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 Spec Sheet 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