Velora UI

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
Open in v0

Preview

Patterns

Maskable backdrops.

Meteors

Streaks of light.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/bento-grid.json

Adds components/velora/bento-grid.tsx, installs lucide-react.

Props

BentoGrid

PropTypeDefault
children*React.ReactNode—

Also accepts every <div> attribute, forwarded to the root element.

BentoCard

PropTypeDefault
name*string—
description*string—
background

Visual filling the card behind the text (chart, image, animation…)

React.ReactNode—
iconReact.ReactNode—
hrefstring—
ctastring"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.