Dev Design LibraryTailwind CSS Bento Grid Components
Dev Design Library indexes 64 Tailwind CSS bento grid components from 15 open-source UI libraries, with the most coming from Watermelon UI, D2Studio UI, Oxbow UI, FLX UI and Aceternity UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Bento grid components belong to the Layout group.
Bento GridMagic UI · ReactBento grid is a layout used to showcase the features of a product in a simple and elegant way.
Widget GridKokonut UI · ReactDashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
Bento GridSpectrum UI · ReactA premium interactive Bento Grid component
Agent Bento GridVengeance UI · ReactMulti-agent workspace grid layout
Bento Carduselayouts · ReactAn interactive bento card with animated tabs and workspace preview.
Bento GridAnimations (Svelte) · SvelteA flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style.
Animated Card 1Badtz UI · React
Bento Grids 01Oxbow UI · Astro
Bento 01Watermelon UI · React
Bento BuilderCojeev UI · ReactAn editable Bento canvas with complete partitions, content swapping, snapped neighbor resizing, history and usable…
Bento grids 01FLX UI · ReactThree-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.
Bento GridVelora UI · ReactFeature bento with hover-reveal CTAs and rich backgrounds.
AI BlockD2Studio UI · ReactAI prompt template grid with creative prompts, summarizer, story, poetry and study presets.
Glass Bento GridOpaline · ReactFeature tiles on glass in a bento layout, with a pointer light and a call to action that slides in.
Features Section Demo 1Aceternity UI · ReactSimple with card gradient
Research Bento GridVengeance UI · ReactAnimated developer-service showcase with interactive pricing and pause states
Magnified Bentouselayouts · ReactA bento card component with a draggable magnifying lens effect over scrolling chips.
Animated Card 2Badtz UI · React
Bento Grids 02Oxbow UI · Astro
Bento 02Watermelon UI · React
Bento GridCojeev UI · ReactA complete canvas of rounded cards or organically interlocking pieces. Compose a layout, then install just the…
Bento grids 02FLX UI · ReactA row of collection cards, one twice as wide, each with a product photo bleeding off the top, a title, a short…
Bento feature gridVelora UI · ReactFive-card bento grid with live visuals: integration beams, orbiting icons, a chart, a tag marquee and a globe.
Bento 01D2Studio UI · ReactBento grid for an education program platform with admin overview, faculty view and a program form.
Features Section Demo 2Aceternity UI · ReactSimple with hover effects
Expandable Bento GridVengeance UI · React
Animated Card 3Badtz UI · React
Bento Grids 03Oxbow UI · Astro
Bento 1Watermelon UI · React
SwapyCojeev UI · ReactCards swap positions through a drag handle or keyboard controls and retain their order in React state.
Bento grids 03FLX UI · ReactA product grid with a tall featured item in the center, four smaller items around it, category badges, prices and names.
Bento 02D2Studio UI · ReactA five-card feature bento with metallic-gradient glyphs on lifting icon tiles, a dot-matrix texture and color-dodged…
Bento GridAceternity UI · React
Why Us BentoVengeance UI · React
Bento Grids 04Oxbow UI · Astro
Bento 10Watermelon UI · React
Bento grids 04FLX UI · ReactTwo stacked cards with a two-tone title, a paragraph and a pill button beside a product photo surrounded by short…
Bento 03D2Studio UI · ReactA flat 3×2 feature grid on thin edge-masked rules — no cards, no fills. Each cell pairs a recessed keycap icon tile…
Features Section Demo 3Aceternity UI · React
Bento Grids 05Oxbow UI · Astro
Bento 11Watermelon UI · React
Bento grids 05FLX UI · ReactA mosaic of rounded tiles that mixes photos with two short text tiles, one with a detail photo at its base and one…
Bento 04D2Studio UI · ReactA four-card services bento on marching dashed blueprint frames. Hover blooms each card's icon from blue to the D2…
Bento Grids 06Oxbow UI · Astro
Bento 12Watermelon UI · React
Bento grids 06FLX UI · ReactA brand mosaic of square tiles around one large central photo, mixing photographs with spaced-out taglines and a small…
Bento 05D2Studio UI · ReactA four-card studio bento on a masked dot field. Each card is a Figma gradient export carrying its own glass fill and…
Bento Grids 07Oxbow UI · Astro
Bento 13Watermelon UI · React
Block 01D2Studio UI · ReactAI feature showcase with smart summarizer, creative prompts, document analysis and engagement metrics cards.
Bento 14Watermelon UI · React
Diagram GridD2Studio UI · ReactA bento scaffold rather than a finished bento: nine slots in the scattered arrangement an integration diagram wants…
Bento 15Watermelon UI · React
Notification BentoD2Studio UI · ReactA four-panel notification bento: a pure-CSS metallic bell on a lit dot-matrix field, recent activity feed, unread…
Bento 16Watermelon UI · React
Bento 17Watermelon UI · React
Bento 2Watermelon UI · React
Bento 3Watermelon UI · React
Bento 4Watermelon UI · React
Bento 5Watermelon UI · React
Bento 6Watermelon UI · React
Bento 7Watermelon UI · React
Bento 8Watermelon UI · React
Bento 9Watermelon UI · React
Libraries with Tailwind CSS bento grid components
Related categories
- Bento Grid Components
- React Bento Grid Components
- Animated Bento Grid Components
- shadcn/ui Bento Grid Components
- Tailwind CSS Layout Components
- Tailwind CSS Grid Components
- Tailwind CSS App Shell Components
- Tailwind CSS Separator Components
- Tailwind CSS Stack Components
- Tailwind CSS Scroll Area Components
- Tailwind CSS Container Components
- Tailwind CSS Split Pane Components
- Tailwind CSS Window Frame Components
- Tailwind CSS Aspect Ratio Components
- Tailwind CSS Sticky Scroll Components
- Tailwind CSS Masonry Components