BentoBox

Name: Boreal UI
Author: Davin Chiupka

The BentoBox component creates responsive editorial grids with items that can span multiple columns and rows.

Usage & Examples

Dashboard Bento Grid

RevenueA wide, tall feature tile.

Conversion8.4% this month

Orders1,248

Returns2.1%

dashboard-bento-grid.tsx

const tileStyle = {
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: "100%",
  minHeight: "4.5rem",
  padding: "1rem",
  border: "1px solid var(--border-color)",
  borderRadius: "var(--border-radius-md, 0.75rem)",
  background: "var(--background-color-surface)",
};

<BentoBox columns={4} minRowHeight="5rem" gap="sm">
  <BentoBoxItem columnSpan={2} rowSpan={2}>
    <div style={tileStyle}><strong>Revenue</strong><span>A wide, tall feature tile.</span></div>
  </BentoBoxItem>
  <BentoBoxItem columnSpan={2}>
    <div style={tileStyle}><strong>Conversion</strong><span>8.4% this month</span></div>
  </BentoBoxItem>
  <BentoBoxItem>
    <div style={tileStyle}><strong>Orders</strong><span>1,248</span></div>
  </BentoBoxItem>
  <BentoBoxItem>
    <div style={tileStyle}><strong>Returns</strong><span>2.1%</span></div>
  </BentoBoxItem>
</BentoBox>

Props API

BentoBox props API
				Default	Description
`BentoBox.align`	`LayoutAlign`	No	props	`—`	Align prop for LayoutPrimitive.
`BentoBox.as`	`ElementType`	No	props	`—`	As prop for LayoutPrimitive.
`BentoBox.children`	`ReactNode`	No	props	`—`	Content rendered inside the component.
`BentoBox.className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`BentoBox.columns`	`BentoBoxColumns`	No	props	`4`	Number of columns at wide container sizes.
`BentoBox.data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`BentoBox.dense`	`boolean`	No	props	`false`	Backfills open cells when possible. Keep this off when visual order must match reading and focus order.
`BentoBox.gap`	`LayoutGap`	No	props	`"md"`	Gap.
`BentoBox.gridClassName`	`string`	No	props	`—`	Additional class name for the internal grid.
`BentoBox.justify`	`LayoutJustify`	No	props	`—`	Justify prop for LayoutPrimitive.
`BentoBox.minRowHeight`	`string`	No	props	`"8rem"`	Minimum height used by each implicit grid row.
`BentoBox.testId`	`string`	No	props	`—`	Test id used to identify the component in tests.