Bento Grid
Feature bento with hover-reveal CTAs and rich backgrounds.
- 1.0 KB gzipped
- Deps: lucide-react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Patterns
Maskable backdrops.
Meteors
Streaks of light.
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/bento-grid.jsonAdds components/velora/bento-grid.tsx, installs lucide-react.
Props
BentoGrid
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
Also accepts every <div> attribute, forwarded to the root element.
BentoCard
| Prop | Type | Default |
|---|---|---|
name* | string | — |
description* | string | — |
backgroundVisual filling the card behind the text (chart, image, animation…) | React.ReactNode | — |
icon | React.ReactNode | — |
href | string | — |
cta | string | "Learn more" |
Also accepts every <div> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The hover transitions are removed: the CTA link is always shown at the bottom of the card, the text block rests lifted above it, and the background no longer scales on hover.
- Keyboard
- The CTA link (rendered when href is set) is reachable with Tab; focusing it reveals it the same way hover does and shows a focus ring.
- Screen readers
- Reads the card heading, description and CTA link; the gradient overlay is hidden, but any text inside the background node is read as well.