Bento Builder

Drag-and-resize bento grid canvas — arrange tiles wherever you want, then copy the generated layout code straight into your own project.

Export layout

import { BentoBuilder } from "@/components/ui/bento-builder";

export function LayoutTool() {
  return <BentoBuilder />;
}

Props

Description

BentoBuilder

cols

Number of grid columns. Changing it re-lays the default tiles out to fit the new column count.

Type number·Default 6

rowHeight

Height of each grid row, in pixels.

Type number·Default 110

gap

Gap between tiles, in pixels.

Type number·Default 12

cornerRadius

Corner radius of every tile, in pixels — adjustable from the preview's settings panel.

Type number·Default 24

className

Extra classes for the root canvas, merged over the default card surface.

Type string

onLayoutChange

Called with the generated layout snippet every time a tile moves, resizes, is added, or removed — useful for mirroring the canvas's current code outside the component.

Type (code: string) => void

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion, lucide-react.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Overview

2 × 2

Analytics

2 × 1

Revenue

1 × 1

Uptime

1 × 2

Calendar

2 × 1

Team

1 × 1

Tip: drag a tile to reposition it — dropping on a same-size tile swaps them, or on a group that matches its footprint (e.g. 3×1 over 2×1+1×1). Tap a tile to rename it, drag its corner handle to resize, and use the × to remove it — all of this works with touch too. Paste the generated layout into your project; set href on a tile to make it a link, then add descriptions and images.