React Bento Grid Components

Dev Design Library indexes 59 React bento grid components from 16 open-source UI libraries, with the most coming from Watermelon UI, D2Studio UI, FLX UI, Aceternity UI and Vengeance 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 targets React. Bento grid components belong to the Layout group.

• Magic BentoReact Bits · ReactInteractive bento grid tiles expand + animate with various options.
• Bento GridMagic UI · ReactBento grid is a layout used to showcase the features of a product in a simple and elegant way.
• Awesome Bento GridLobe UI · React
• 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.
• Animated Card 1Badtz UI · React
• 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.
• Stacker Style Bento GridCue Foundations · React
• 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 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 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 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 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 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 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 React bento grid components

• Watermelon UI
• D2Studio UI
• FLX UI
• Aceternity UI
• Vengeance UI

Related categories

• Bento Grid Components
• Tailwind CSS Bento Grid Components
• Animated Bento Grid Components
• shadcn/ui Bento Grid Components
• React Layout Components
• React Grid Components
• React App Shell Components
• React Separator Components
• React Stack Components
• React Split Pane Components
• React Window Frame Components
• React Masonry Components