Data displayFree component
Bento Grid
A responsive grid of feature cards with room for visuals, descriptions, and calls to action. Compose each card to suit your content.
Preview
Open previewInstallation
Add bento grid to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-bento-grid.jsonUsage
TSXUsage example
import { BentoCard, BentoGrid } from "@/components/menace-bento-grid";
<BentoGrid>
<BentoCard
name="Fast workflows"
description="Move from idea to shipped work without losing context."
href="/features"
cta="Learn more"
Icon={SparklesIcon}
background={<FeatureArtwork />}
/>
</BentoGrid>Props
Key options and their defaults.
childrenrequired- BentoCard instances or other grid content.
backgroundrequired- Decorative React content positioned behind the card copy.
Iconrequired- Icon component rendered above the feature name.
href / ctarequired- Accessible destination and label for the card action.
- Collapses from three columns to two and then one as space gets tighter.
- The call to action stays visible on touch layouts and reveals on hover or keyboard focus at desktop widths.
- Decorative backgrounds are hidden from assistive technology, and motion transitions respect reduced-motion preferences.