BentoGrid

A composable grid layout inspired by bento boxes. Combine cells of different sizes with colSpan and rowSpan to build rich, editorial-style layouts.

Interactive Demo

A 4-column bento grid with mixed cell sizes.

Dark Mode

Fast

Hardware-accelerated animations.

Accessible

Animated

Tested

Usage

import { BentoGrid } from "@mantleui/react/motion";

<BentoGrid columns={4} gap={16}>
  <BentoGrid.Item colSpan={2}>
    <Card>Fast</Card>
  </BentoGrid.Item>
  <BentoGrid.Item>
    <Card>Accessible</Card>
  </BentoGrid.Item>
  <BentoGrid.Item>
    <Card>TypeSafe</Card>
  </BentoGrid.Item>
  <BentoGrid.Item rowSpan={2}>
    <Card>Dark Mode</Card>
  </BentoGrid.Item>
  <BentoGrid.Item colSpan={2}>
    <Card>Animated</Card>
  </BentoGrid.Item>
  <BentoGrid.Item>
    <Card>Tested</Card>
  </BentoGrid.Item>
</BentoGrid>

BentoGrid props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Grid cells. Typically a list of `BentoGrid.Item`s.
`columns`	`number`	`4`	Number of columns in the grid.
`gap`	`number`	`16`	Gap between cells in pixels.

children

ReactNode

Grid cells. Typically a list of `BentoGrid.Item`s.

columns4

number

Number of columns in the grid.

gap16

number

Gap between cells in pixels.

BentoGrid.Item props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Cell content.
`colSpan`	`number`	`1`	Number of columns the cell should span.
`rowSpan`	`number`	`1`	Number of rows the cell should span.

children

ReactNode

Cell content.

colSpan1

number

Number of columns the cell should span.

rowSpan1

number

Number of rows the cell should span.