design-infraReport a problem or share feedback← Catalog
Magic Bento
curatedfreereact-bits/magic-bento
Interactive bento grid tiles expand + animate with various options.
$
npx shadcn@latest add @react-bits/MagicBento-TS-TWnpm deps: gsap
Our notes
Bento grid with spotlight, border glow, particles and tilt (GSAP). Hard-coded dark palette (#120F17 cards, #2F293A borders, text-white) — only for dark sites, or rework colours.- Source
- React Bits
- Kind
- component
- Categories
- bento
- Use as
- drop-in — replaces your component
- Applies to
- bentofeatures
- Motion
- on hover, cursor · expressive · gsap · medium cost · ignores reduced motion
- Tags
- components, gsap
- Licence
- MIT + Commons Clause: free to use in commercial apps/sites, but you may not sell or redistribute the components themselves (alone, bundled, or ported). React Bits Pro is a separate paid product.
- Live demo
- www.reactbits.dev
- Docs
- www.reactbits.dev
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.
- Bento Gridmagicui/bento-gridFeature 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.