Pinned Rail Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-pinned-rail

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

Usage

tsx

import { FeaturePinnedRail } from '@/components/blocks/feature-pinned-rail'

Exampletsx

import {
  FileSearch,
  GitMerge,
  ShieldCheck,
  TimerReset,
  Workflow,
} from 'lucide-react'
import { FeaturePinnedRail } from '@/components/blocks/feature-pinned-rail'

export default function FeaturePinnedRailDemo() {
  return (
    <FeaturePinnedRail
      eyebrow="Built for controllers"
      heading="Evidence that holds up when the quarter closes."
      description="A calmer ops layer sits beside your ERP, matching, routing, and audit packs that finance teams actually trust under deadline."
      features={[
        {
          icon: FileSearch,
          title: 'Document intelligence',
          body: 'Invoices, POs, and packing slips land in one queue. Fields extract against your chart of accounts, not a generic template.',
          kicker: '14 formats',
        },
        {
          icon: GitMerge,
          title: 'Policy-aware matching',
          body: 'Tolerance bands, cost-center rules, and dual-approval thresholds travel with every line, not buried in a spreadsheet.',
          kicker: 'rules engine',
        },
        {
          icon: Workflow,
          title: 'Exception routing',
          body: 'Mismatches escalate to the right owner with context attached. Resolve in-product or push a decision back to NetSuite in one action.',
          kicker: 'SLA 4h',
        },
        {
          icon: ShieldCheck,
          title: 'Signed audit packs',
          body: 'Export a sealed pack for any close window: decisions, overrides, and source hashes. Auditors stop asking for screenshots.',
          kicker: 'SOC 2',
        },
        {
          icon: TimerReset,
          title: 'Nightly close assist',
          body: 'Unmatched lines get a status before 7am local. Your team starts the day on judgment calls, not scavenger hunts.',
          kicker: '07:00',
        },
      ]}
    />
  )
}

API reference

FeaturePinnedRail accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`features`*	`PinnedRailFeature[]`	–	–

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

Referenced types

Typestsx

export interface PinnedRailFeature {
  icon?: LucideIcon
  title: string
  body: string
  kicker?: string
}

Related components

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.

Steps Path

A numbered process where a hairline path literally draws the route between steps as you scroll, order made visible, each milestone settling in turn.

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.

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.

Frequently asked questions

How do I install the Pinned Rail 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-pinned-rail`. 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 Pinned Rail Features require?

Pinned Rail 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 Pinned Rail 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