Bento Grid

Animated bento feature grid: files flowing through an action, drifting category rows, a playable install and a copyable command.

ReactBento GridFeaturesMarqueeTailwindAccessible
Open in
text-effect.tsxprofile-card.tsxreceipt-printer.tsxtabs-switcher.tsxnow-playing-card.tsxdock-gallery.tsxteam-carousel.tsx
Add to project

Proven Components,
Rapid Results

Interfaces that move? Solved. Copy production-ready React components, typed, accessible and themable, straight into your codebase.

Learn more
Interaction Patterns
Animated Inputs
Cards & Widgets
Motion Effects
Backgrounds
Page Blocks
React Hooks
Templates

Copy-Paste &
Project-Ready

Turn component chaos into a design system you own.

Every file lands in components/ui, typed, themable and yours to change.

96 components

Aligned With
Your Workflow

Hand off a whole component with one command. It arrives as plain source you can read, review and refactor.

Copy the install command

Every component ships with keyboard, screen reader and reduced-motion support.

Ask Devsloka

96 Registry Files

  • profile-card.json
  • receipt-printer.json
  • arc-scroll-steps.json
  • availability-card.json
  • reminders-card.json
  • morphing-nav.json

Install Dependencies

1npx shadcn@latest add https://ui.devsloka.in/r/bento-grid.json