Ledger List Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-ledger-list

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

Usage

tsx

import { FeatureLedgerList } from '@/components/blocks/feature-ledger-list'

Exampletsx

import { FeatureLedgerList } from '@/components/blocks/feature-ledger-list'

export default function FeatureLedgerListDemo() {
  return (
    <FeatureLedgerList
      eyebrow="Platform index"
      heading="What ships in the runtime."
      description="Every capability below is a named module with a published surface. Status tracks the public API, not the internal ticket board."
      items={[
        {
          name: 'Policy engine',
          line: 'Declarative rules evaluated at every write path',
          status: 'shipped',
          href: '#policy-engine',
        },
        {
          name: 'Replay store',
          line: 'Point-in-time restore for any workflow run',
          status: 'shipped',
          href: '#replay-store',
        },
        {
          name: 'Webhook fabric',
          line: 'Signed delivery with automatic retry budgets',
          status: 'shipped',
        },
        {
          name: 'Schema registry',
          line: 'Versioned contracts across services and SDKs',
          status: 'shipped',
          href: '#schema-registry',
        },
        {
          name: 'Edge cache',
          line: 'Region-aware reads with stale-while-revalidate',
          status: 'beta',
        },
        {
          name: 'Audit ledger',
          line: 'Immutable event log exportable as CSV or S3',
          status: 'shipped',
        },
        {
          name: 'Agent sandbox',
          line: 'Isolated tool execution with spend caps',
          status: 'beta',
          href: '#agent-sandbox',
        },
      ]}
    />
  )
}

API reference

FeatureLedgerList accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`items`*	`FeatureLedgerListItem[]`	–	5–9 rows; index auto-numbers 01.. in order

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

Referenced types

Typestsx

export interface FeatureLedgerListItem {
  name: string
  line: string
  status?: 'shipped' | 'beta'
  href?: 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.

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.

Platform Matrix Features

Feature availability matrix for React product sites, capabilities as rows, platforms as columns, tri-state Tailwind-token cells for shipped, partial, and planned. Docs-grade truth.

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.

Frequently asked questions

How do I install the Ledger List 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-ledger-list`. 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 Ledger List Features require?

Ledger List 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 Ledger List 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