Shadcn Studio Bento Builder Documentation

Learn how to design bento grid layouts visually - place cards, resize them, pin the ones that matter, and export the code.

Overview#

The Bento Builder lets you compose a bento grid from ready-made bento cards. Cards sit on a free-placement grid, so you decide exactly where each one goes and how many columns and rows it covers. Everything is visual. When you're happy with the result, you can preview it at desktop, tablet and mobile sizes, then export the shadcn CLI install command and the page code for your project.

Head to Shadcn Studio Bento Builder to get started.

Adding Bento Cards to the Grid#

The left panel has three tabs - Bento, Layout and Layers. The Bento tab lists every available bento card. Hover over a card in the list to see a live preview of it next to the panel.

To add a card to your grid, you can either:

• Click a card in the list - it is placed in the first free spot on the grid
• Drag a card from the list and drop it onto the canvas. A ghost placeholder shows where it will land, and cards in the way move aside while you drag
• Drop it on an existing card to replace that card with the one you dragged

Cards already on the grid are dimmed in the list and show a check mark. The grid starts empty, so your first card can also be a preset layout (see below).

Starting from a Preset Layout#

At the top of the Bento tab, use the toggle next to the search bar to switch between Bento Cards and Presets. Hover over either icon to see its name.

The Presets view shows ten ready-made layouts, each with a thumbnail of its card sizes - Classic six, Hero focus, Two up, Product tour, Spotlight, Mosaic, Side feature, Banner pair, Split focus and Triptych. Click a preset to fill the grid with it. The preset currently in use is highlighted.

Applying a preset arranges your grid into that layout. You can then swap any card, resize it or move it like any other.

Filtering & Searching#

Moving and Resizing Cards#

Click a card on the canvas to select it. A toolbar appears at the bottom of the canvas with the actions for that card. Click an empty area of the canvas to deselect it.

Pinning a Card#

Pin a card to lock its position and size. This is useful when you have set a card to exactly the size you want and don't want Tidy up or another card's resize to change it.

You can pin or unpin a card from three places:

• The pin icon that appears in the top-right corner when you hover over a card
• The Pin button in the toolbar of a selected card
• The pin button on the card's row in the Layers tab

A pinned card:

• Shows a filled pin badge, and has no resize handles - the size buttons are disabled until you unpin it
• Can't be dragged, and other cards can't be dropped onto it or resized over it
• Keeps its place when you use Tidy up. While any card is pinned, Tidy up won't close empty rows, so a pinned card stays in its row
• Can still be shuffled - it keeps its slot and stays pinned

Tidying Up the Grid#

When you leave gaps in the grid, Tidy up fills them. With nothing selected, the toolbar at the bottom of the canvas shows a Tidy up button with the number of gaps (for example Tidy up · 2 gaps). Click it to close empty rows and let cards grow into the free space. The button reads No gaps to fill when there is nothing to fix, and disables itself when the remaining gaps can't be closed. The same button is also in the Layout tab.

Tidy up can change the size of cards that border a gap. If you want a card to stay exactly as it is, pin it first.

Customizing the Layout#

Open the Layout tab in the left panel to adjust the grid itself:

• Columns: 2, 3 or 4 columns on desktop. The Columns control is also in the bottom toolbar
• Row height: a slider from 240px to 480px that sets the height of one grid row
• Gap: 8, 12, 16 or 24px between cards
• Corners: XS, SM, LG or XL corner radius for every card
• Column guides: show the grid lines behind your cards while you work

The Responsive summary at the bottom of the tab lists how the grid behaves on each device: your chosen column count on desktop, two columns on tablet, and a single stacked column on mobile.

Reordering Cards in Layers#

The Layers tab shows a compact list of every card on the grid, in order. To change the order, drag a card up or down in the list. The canvas updates in real time. The order matters most on mobile, where cards stack in this order.

Click a row to select that card on the canvas. Each row also has a pin button and a delete button.

Shuffling a Card#

Select a card and click the shuffle icon (two crossing arrows) in the toolbar. It replaces that card with a random bento card that isn't already on your grid, keeping the same position and size. It is a quick way to explore alternatives without going back to the list.

Deleting a Card#

Select a card and click the red trash icon in the toolbar, or press Delete / Backspace. You can also use the trash button on a card's row in the Layers tab. If you delete a card by mistake, undo it with ⌘Z.

Undo and Redo#

Every change - adding, moving, resizing, pinning, deleting, applying a preset or changing a layout setting - can be undone. Use the Undo and Redo buttons in the top header, or the shortcuts ⌘Z to undo and ⇧⌘Z (or ⌘Y) to redo. On Windows, use Ctrl instead of ⌘. The builder remembers your last 50 steps.

Designing for Desktop, Tablet and Mobile#

Use the device toggle in the top header to switch the canvas between Desktop (fluid, up to 1232px), Tablet (820px) and Mobile (390px).

• Tablet uses a two-column grid. It starts as a repacked copy of your desktop layout, and from then on you can move, resize and pin cards there independently - the desktop layout is not affected. The column count is fixed in this view
• Mobile is a single column. Cards stack in the order shown in the Layers tab

The exported code includes both the tablet and the desktop placement of every card.

Resetting the Builder#

Click Reset in the top header to clear the whole grid and return the layout settings to their defaults. A confirmation popover appears before anything is removed. Your layout is kept in your browser's local storage, so it is still there when you refresh the page - Reset is how you start over.

Previewing Your Grid#

Click Preview in the top header to hide the panels, handles and toolbar and see your grid as a visitor would, with all the cards fully interactive. The device size you were working in is kept, so you can check each breakpoint. Click Collapse to return to the editor.

Use the light/dark mode button in the header to check how the cards look in both themes.

Copy a Prompt for Your AI Agent#

Switch to the Prompt tab and click Copy prompt to copy a prompt that contains the install command and the page code. Paste it into Claude Code, Cursor or any coding agent and it will set up the grid for you. Make sure you have Shadcn Studio registry. Refer to the How to use Shadcn CLI guide for full setup instructions.