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.
bentoshowcasefeatureshoverillustrationlanding
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/bento-showcase
Usage
usage.tsx
1import { BentoShowcase } from "@/components/blocks/bento-showcase";
2
3export default function Product() {
4 return (
5 <BentoShowcase
6 heading="One workspace, five superpowers"
7 items={[
8 { eyebrow: "Search", title: "Find anything", description: "Cmd K across every doc.", illustration: "palette", href: "/search" },
9 { eyebrow: "Themes", title: "Your brand, everywhere", description: "Tokens drive every surface.", illustration: "theme" },
10 { eyebrow: "Motion", title: "Feels native", description: "Tuned springs.", illustration: "spring" },
11 { eyebrow: "Integrations", title: "Plays well with others", description: "40+ connectors.", illustration: "orbit" },
12 { eyebrow: "Analytics", title: "See what changed", description: "Charts that update live.", illustration: "chart" },
13 ]}
14 />
15 );
16}
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.