design-infraReport a problem or share feedback← Catalog
Bento Grid
curatedfreemagicui/bento-grid
Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
$
npx shadcn@latest add @magicui/bento-gridnpm deps: @radix-ui/react-icons
Our notes
Feature bento with icon + hover CTA. Hard-codes neutral-*/black alpha colours and needs @radix-ui/react-icons — prefer @oc/feature-bento, or swap to bg-card/text-muted-foreground.- Source
- Magic UI
- Kind
- component
- Categories
- bento, background
- Use as
- drop-in — replaces your component
- Applies to
- bentofeatures
- Motion
- on hover · subtle · css · low cost · ignores reduced motion
- Licence
- MIT (magicuidesign/magicui). Magic UI Pro templates are a separate paid product — not catalogued.
- Live demo
- magicui.design
- Docs
- magicui.design
Similar
Compare all 4 →- Bento Gridaceternity/bento-gridSimple bento layout. Colours are hard-coded neutral-200/white/black — prefer @oc/feature-bento for theme-aware tiles, or swap classes to bg-card/border.
- Features · Bentooc/feature-bentoTheme-aware bento grid for feature sections. Tiles span 1, 2 or a full row; hover glow uses --primary.
- Layout Gridaceternity/layout-gridA layout effect that animates the grid item on click, powered by framer motion layout