Docs
Bento Grid

Bento Grid

The Bento Grid component is a versatile element designed to offer a responsive and adaptable grid system, ideal for organizing and showcasing content with efficiency and style. Featuring a distinctive skewed layout, it empowers developers to effortlessly arrange content elements such as titles, descriptions, and headers, providing a visually engaging user experience across various devices and screen sizes.

The Dawn of Innovation
Explore the birth of groundbreaking ideas and inventions.
The Digital Revolution
Dive into the transformative power of technology.
The Art of Design
Discover the beauty of thoughtful and functional design.
The Power of Communication
Understand the impact of effective communication in our lives.
The Pursuit of Knowledge
Join the quest for understanding and enlightenment.
The Joy of Creation
Experience the thrill of bringing ideas to life.
The Spirit of Adventure
Embark on exciting journeys and thrilling discoveries.

Installation

yarn add @camped-ui/bento-grid

Usage

import { BentoGrid, BentoGridItem } from "@camped-ui/bento-grid";

Examples

Populated with Header and Content

AI Content Generation
Experience the power of AI in generating unique content.
Automated Proofreading
Let AI handle the proofreading of your documents.
Contextual Suggestions
Get AI-powered suggestions based on your writing context.
avatar

Just code in Vanilla Javascript

Delusional

avatar

Tailwind CSS is cool, you know

Sensible

avatar

I love angular, RSC, and Redux.

Helpless

Sentiment Analysis
Understand the sentiment of your text with AI analysis.
avatar

There are a lot of cool framerworks out there like React, Angular, Vue, Svelte that can make your life ....

Use PHP.

Text Summarization
Summarize your lengthy documents with AI technology.

2 Column Grid

The Dawn of Innovation
Explore the birth of groundbreaking ideas and inventions.
The Digital Revolution
Dive into the transformative power of technology.
The Art of Design
Discover the beauty of thoughtful and functional design.
The Power of Communication
Understand the impact of effective communication in our lives.

Props

Prop name

TypeDescription
classNamestringThe class name of the child component.
items

title: string, description: string, header: ReactNode, icon: ReactNode

items that you can map through, passed as props to the BentoGridItem component