# Bento Showcase

> Asymmetric bento of five product cards; hovering or focusing a card plays its illustration — a typing command palette, fanning theme cards, a spring curve, a spinning orbit and a redrawing chart.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/bento-showcase
- Install: `npx shadcn@latest add @geturui-pro/bento-showcase`
- Dependencies: motion, lucide-react

## Usage

```tsx
import { BentoShowcase } from "@/components/blocks/bento-showcase";

export default function Product() {
  return (
    <BentoShowcase
      heading="One workspace, five superpowers"
      items={[
        { eyebrow: "Search", title: "Find anything", description: "Cmd K across every doc.", illustration: "palette", href: "/search" },
        { eyebrow: "Themes", title: "Your brand, everywhere", description: "Tokens drive every surface.", illustration: "theme" },
        { eyebrow: "Motion", title: "Feels native", description: "Tuned springs.", illustration: "spring" },
        { eyebrow: "Integrations", title: "Plays well with others", description: "40+ connectors.", illustration: "orbit" },
        { eyebrow: "Analytics", title: "See what changed", description: "Charts that update live.", illustration: "chart" },
      ]}
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| items | `BentoItem[]` | — | { title, description, illustration, eyebrow?, href? }. Five fill the layout; the first gets the large tile. |
| items[].illustration | `"palette" | "theme" | "spring" | "orbit" | "chart"` | — | Hover-triggered drawing for the card. |
| items[].href | `string` | — | Makes the whole card a link with a nudging arrow. |
| eyebrow / heading / subheading | `string` | — | Section copy. |

## Accessibility

- Illustrations are aria-hidden; each card's title is a real heading.
- Linked cards are focusable and play their illustration on keyboard focus as well as hover.
- Looping motion (orbit spin, palette highlight) only runs while hovered and is replaced by a static end state under reduced motion.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.