Bento Feature Grid

Installation

pnpm dlx shadcn@latest add @cleverui/feature-bento

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

Usage

tsx

import { FeatureBento } from '@/components/blocks/feature-bento'

Exampletsx

import { Inbox, FileCheck, GitBranch, BellOff, Landmark, Fingerprint } from 'lucide-react'
import { FeatureBento } from '@/components/blocks/feature-bento'

export default function FeatureBentoDemo() {
  return (
    <FeatureBento
      eyebrow="What it runs for you"
      heading="One grid of work you never do again."
      features={[
        {
          icon: Inbox,
          title: 'Inbox triage',
          body: 'Classifies, drafts, and files every inbound thread, your team only sees the ones needing judgment.',
          kicker: '214 / wk',
          span: 'wide',
        },
        {
          icon: FileCheck,
          title: 'Invoice matching',
          body: 'Three-way match against POs and deliveries, flagged only when the numbers disagree.',
          kicker: '99.98%',
        },
        {
          icon: GitBranch,
          title: 'Handoffs',
          body: 'Work moves itself between tools when a stage completes, no “did you see my Slack?”',
        },
        {
          icon: Landmark,
          title: 'Reconciliation',
          body: 'Ledger entries settle nightly with a full audit trail you can replay line by line.',
          kicker: 'nightly',
        },
        {
          icon: BellOff,
          title: 'Quiet by design',
          body: 'No dashboards to babysit. One digest, weekdays at 8am, only if something changed.',
        },
        {
          icon: Fingerprint,
          title: 'Scoped permissions',
          body: 'Every automation runs as a named identity with the least access that still does the job.',
          span: 'wide',
        },
      ]}
    />
  )
}

API reference

FeatureBento accepts the following props.

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

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

Referenced types

Typestsx

export interface BentoFeature {
  icon: LucideIcon
  title: string
  body: string
  /** mono micro-label, e.g. a metric or status */
  kicker?: string
  /** tile footprint on desktop */
  span?: 'default' | 'wide' | 'tall'
}

Related components

Pinned Rail Features

Sticky narrative column on the left while feature cards scroll past on the right, the copy holds the argument as the evidence flows. Scrollytelling without the framework.

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.

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 Bento Feature Grid 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-bento`. 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 Bento Feature Grid require?

Bento Feature Grid 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 Bento Feature Grid 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