Bento Grid

A flexible grid layout component.

Build a better website, faster.

100+ sections and components

All the elements you need to build a modern, responsive, and accessible landing page.

You're in control

This is not a component library. It's a collection of re-usable components that you can copy and paste into your apps.

Fits right into your stack

Built with modern web technologies and tools that fit right into any React project.

No bloat, no extra dependencies, no risk of conflicts.

Data-agnostic

All the data is separate from components so you can edit it in seconds or make it dynamic.

Easily connect to a CMS of your choice.

We need to update this heading before launch
Sofia G.
Let me quickly jump into Sanity and fix it
Done!
Erik D.

Installation

npx shadcn@latest add "https://launchuicomponents.com/r/bento-grid"

Usage

Examples

2x2

Build a better website, faster.

100+ sections and components

All the elements you need to build a modern, responsive, and accessible landing page.

You're in control

This is not a component library. It's a collection of re-usable components that you can copy and paste into your apps.

Fits right into your stack

Built with modern web technologies and tools that fit right into any React project.

No bloat, no extra dependencies, no risk of conflicts.

Data-agnostic

All the data is separate from components so you can edit it in seconds or make it dynamic.

Easily connect to a CMS of your choice.

We need to update this heading before launch
Sofia G.
Let me quickly jump into Sanity and fix it
Done!
Erik D.
1x3

Build a better website, faster.

Fits right into your stack

Built with modern web technologies and tools that fit right into any React project.

No bloat, no extra dependencies, no risk of conflicts.

100+ sections and components

All the elements you need to build a modern, responsive, and accessible landing page.

You're in control

This is not a component library. It's a collection of re-usable components that you can copy and paste into your apps.

We need to update this heading before launch
Sofia G.
Let me quickly jump into Sanity and fix it
Done!
Erik D.

Data-agnostic

All the data is separate from components so you can edit it in seconds or make it dynamic.

Easily connect to a CMS of your choice.

Fits right into your stack

Built with modern web technologies and tools that fit right into any React project.

No bloat, no extra dependencies, no risk of conflicts.

Need help?

File a feature request, report a bug, or ask me anything.