# Bento Feature Cells

> Four principles in a balanced two-row bento.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/bento-feature-cells).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/bento-feature-cells
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/bento-feature-cells-light-de6b6aee6f675e67.png
- Registry item: https://blockforge.terravidhal.me/r/bento-feature-cells.json
- Categories: bento
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/bento-feature-cells.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `registry/blocks/bento-feature-cells.tsx`

```tsx
import { Boxes, Fingerprint, Gauge, Palette } from "lucide-react";

const cells = [
  {
    icon: Gauge,
    title: "Fast by default",
    description:
      "Server components, edge caching and zero client JS where none is needed.",
    span: true,
  },
  {
    icon: Palette,
    title: "Yours to theme",
    description: "Semantic tokens — change five variables, rebrand everything.",
    span: false,
  },
  {
    icon: Fingerprint,
    title: "Accessible",
    description: "Keyboard, screen readers and focus states handled for you.",
    span: false,
  },
  {
    icon: Boxes,
    title: "Composable",
    description:
      "Every section is a standalone component. Stack, reorder, remove — nothing breaks.",
    span: true,
  },
];

export default function BentoFeatureCells() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-5xl px-6 py-20 sm:py-24">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Built on decisions, not defaults
          </h2>
          <p className="mt-2 text-muted-foreground">
            Four principles behind every component we ship.
          </p>
        </div>

        <div className="grid gap-4 sm:grid-cols-3">
          {cells.map((cell) => (
            <div
              key={cell.title}
              className={
                cell.span
                  ? "rounded-xl border border-border/60 bg-card p-6 sm:col-span-2"
                  : "rounded-xl border border-border/60 bg-card p-6"
              }
            >
              <cell.icon className="size-5" />
              <h3 className="mt-4 text-sm font-medium">{cell.title}</h3>
              <p className="mt-1.5 text-sm text-muted-foreground">
                {cell.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```