Layer Stack Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-layer-stack

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

Usage

tsx

import { FeatureLayerStack } from '@/components/blocks/feature-layer-stack'

Exampletsx

import { FeatureLayerStack } from '@/components/blocks/feature-layer-stack'

export default function FeatureLayerStackDemo() {
  return (
    <FeatureLayerStack
      eyebrow="Runtime architecture"
      heading="Five layers. One deploy surface."
      description="Fieldnote ships as a vertical stack, each plane owns a contract, and the plane above never reaches past it. Swap hosts without rewriting the middle."
      layers={[
        {
          icon: 'Globe',
          label: 'Edge gateway',
          sublabel: 'ingress',
          note: {
            title: 'Signed entry, region-local',
            body: 'TLS termination, JWT verification, and request shaping land here before anything touches product code.',
          },
        },
        {
          icon: 'Workflow',
          label: 'Orchestration plane',
          sublabel: 'workflows',
          note: {
            title: 'Durable runs with spend caps',
            body: 'Step graphs resume after deploys. Every tool call inherits a budget and a kill switch from policy.',
          },
        },
        {
          icon: 'Shield',
          label: 'Policy & identity',
          sublabel: 'control',
          note: {
            title: 'Rules evaluated on every write',
            body: 'Declarative packs gate mutations. Agents and humans share the same enforcement path.',
          },
        },
        {
          icon: 'Database',
          label: 'State & replay',
          sublabel: 'storage',
          note: {
            title: 'Point-in-time restore',
            body: 'Event-sourced ledgers keep every run reconstructible, export as CSV or stream to your own S3.',
          },
        },
        {
          icon: 'Server',
          label: 'Compute fabric',
          sublabel: 'workers',
          note: {
            title: 'Isolated sandboxes',
            body: 'Tool processes run in short-lived containers with network allowlists. Coarse pointers and cold starts are expected.',
          },
        },
      ]}
      baseline="Self-hosted or cloud, same stack"
    />
  )
}

API reference

FeatureLayerStack accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`layers`*	`FeatureLayerStackLayer[]`	–	3–5 layers, top-to-bottom in the stack; each pairs with its note by index
`baseline`	`string`	–	mono caption under the stack

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

Referenced types

Typestsx

export interface FeatureLayerStackLayer {
  /** lucide-react icon name, e.g. 'Database' */
  icon?: string
  label: string
  sublabel?: string
  note: FeatureLayerStackNote
}

export interface FeatureLayerStackNote {
  title: string
  body: string
}

Related components

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.

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 Layer Stack 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-layer-stack`. 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 Layer Stack Features require?

Layer Stack 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 Layer Stack 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