Inventory Wall Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-inventory-wall

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

Usage

tsx

import { FeatureInventoryWall } from '@/components/blocks/feature-inventory-wall'

Exampletsx

import { FeatureInventoryWall } from '@/components/blocks/feature-inventory-wall'

export default function FeatureInventoryWallDemo() {
  return (
    <FeatureInventoryWall
      eyebrow="Included surface"
      heading="Everything the runtime already ships."
      description="Meridian bills for seats, not for checkboxes. The inventory below is the public API surface as of the 4.2 train, counted from the changelog, not a sales deck."
      groups={[
        {
          label: 'Core runtime',
          items: [
            { label: 'Workflow engine', featured: true },
            { label: 'Event bus' },
            { label: 'Cron scheduler' },
            { label: 'Retry budgets' },
            { label: 'Dead-letter queue' },
            { label: 'Idempotency keys' },
            { label: 'Circuit breakers' },
            { label: 'Rate limiters' },
            { label: 'Feature flags' },
            { label: 'Config store' },
          ],
        },
        {
          label: 'Data plane',
          items: [
            { label: 'Postgres adapter' },
            { label: 'Redis cache' },
            { label: 'S3 object store' },
            { label: 'Blob signing' },
            { label: 'CDC streams' },
            { label: 'Schema registry', featured: true },
            { label: 'Migration runner' },
            { label: 'Read replicas' },
            { label: 'Point-in-time restore' },
            { label: 'Export jobs' },
            { label: 'Row-level policies' },
            { label: 'Encrypted fields' },
          ],
        },
        {
          label: 'Observability',
          items: [
            { label: 'Structured logs' },
            { label: 'Trace export' },
            { label: 'Metric histograms' },
            { label: 'Alert rules' },
            { label: 'SLO burn alerts' },
            { label: 'Runbooks' },
            { label: 'Incident hooks' },
            { label: 'Audit ledger', featured: true },
            { label: 'Replay viewer' },
            { label: 'Cost dashboards' },
          ],
        },
        {
          label: 'Integrations',
          items: [
            { label: 'Webhook fabric' },
            { label: 'Slack notifications' },
            { label: 'PagerDuty' },
            { label: 'GitHub Actions' },
            { label: 'Terraform provider' },
            { label: 'OpenAPI export' },
            { label: 'GraphQL gateway' },
            { label: 'CLI SDK' },
            { label: 'TypeScript client' },
            { label: 'Python client' },
            { label: 'Go client' },
            { label: 'Webhook signing' },
          ],
        },
        {
          label: 'Security',
          items: [
            { label: 'SSO / SAML' },
            { label: 'SCIM provisioning' },
            { label: 'API keys' },
            { label: 'mTLS edges' },
            { label: 'Cosign verify' },
            { label: 'Secret rotation' },
            { label: 'IP allowlists' },
            { label: 'Session policies' },
          ],
        },
      ]}
      footnote="Counted, not padded, changelog has receipts"
    />
  )
}

API reference

FeatureInventoryWall accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`groups`*	`FeatureInventoryWallGroup[]`	–	–
`footnote`	`string`	–	–

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

Referenced types

Typestsx

export interface FeatureInventoryWallGroup {
  label: string
  items: FeatureInventoryWallItem[]
}

export interface FeatureInventoryWallItem {
  label: string
  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.

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.

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.

Frequently asked questions

How do I install the Inventory Wall 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-inventory-wall`. 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 Inventory Wall Features require?

Inventory Wall 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 Inventory Wall 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