caliper uidocs
DemoSign inGet Pro

Feature bento

Block

A bento grid of features of different sizes.

Installs components/ui/feature-bento.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/feature-bento.json

  • One system, every screen

    Dashboards, forms, charts and editors that feel like the same product.

  • Real-time without the jitter

    Live data that scrolls smoothly and never moves the layout.

  • Dark mode

    Designed, not inverted.

  • Keyboard

    Every control, every shortcut.

  • Built for teams

    Roles, invites, audit trails.

  • Charts that explain themselves

    Each one has a sentence and a table.

When to use #

Use it for

  • Showing several benefits at once.

Skip it when

  • Features need detail.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/feature-bento.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { FeatureBento } from "@/components/ui/feature-bento"

const mock = (n: number, label: string) => (
  <div className="grid w-full max-w-xs gap-2" aria-hidden="true">
    <p className="text-xs uppercase tracking-wide text-muted-foreground">{label}</p>
    {[0.9, 0.6, 0.75].map((w, i) => <span key={i} className="block h-3 rounded-full" style={{ width: `${w * 100}%`, background: `color-mix(in srgb, var(--chart-${n}) ${70 - i * 18}%, var(--background))` }} />)}
    <span className="mt-2 block h-16 rounded-lg" style={{ background: `color-mix(in srgb, var(--chart-${n}) 22%, var(--background))` }} />
  </div>
);

export function FeatureBentoDemo() {
  return (
    <div className="grid gap-3">
    <FeatureBento items={[
              { id: "1", size: "big", title: "One system, every screen", body: "Dashboards, forms, charts and editors that feel like the same product.", visual: mock(1, "Dashboard") },
              { id: "2", size: "wide", title: "Real-time without the jitter", body: "Live data that scrolls smoothly and never moves the layout.", visual: mock(2, "Live") },
              { id: "3", size: "small", title: "Dark mode", body: "Designed, not inverted." }, { id: "4", size: "small", title: "Keyboard", body: "Every control, every shortcut." },
              { id: "5", size: "tall", title: "Built for teams", body: "Roles, invites, audit trails.", visual: mock(3, "Team") }, { id: "6", size: "wide", title: "Charts that explain themselves", body: "Each one has a sentence and a table.", visual: mock(4, "Charts") },
            ]} />
    </div>
  );
}

API reference #

FeatureBento

component
PropTypeDefault
items *readonly BentoItem[]—
classNamestring—

Accessibility #

It is built on native elements and keeps aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.