Skip to main content

BentoGrid

Asymmetric feature grid where tiles span different widths and heights.

import { BentoGrid } from "@/fragments/ui";Source

Preview

import { BentoGrid } from '@/components/BentoGrid';
import { Box } from '@/components/Box';

<Box width="100%">
  <BentoGrid columns={3} gap="md">
    <BentoGrid.Item>Item 1</BentoGrid.Item>

Installation

npx @usefragments/cli add bentogrid

Writes src/fragments/ui/components/BentoGrid plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

Hero Layout

One tile takes two columns and two rows; the rest fill around it.

import { BentoGrid } from '@/components/BentoGrid';
import { Box } from '@/components/Box';

<Box width="100%">
  <BentoGrid columns={3} gap="md">
    <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>

Two Column

colSpan stretches a tile across the whole row.

import { BentoGrid } from '@/components/BentoGrid';
import { Box } from '@/components/Box';

<Box width="100%">
  <BentoGrid columns={2} gap="md">
    <BentoGrid.Item>Item 1</BentoGrid.Item>

API

Component props
Prop
Type
Default
Description
childrennodeNot setBentoGrid.Item children
columnsunion2343Number of columns — auto-collapses responsively (3→2→1)
gapenumnonexssmmdlgxlmdGap between grid items, mapped to spacing tokens
styleobjectNot set—

Accessibility

  • Grid is purely visual — it does not affect reading order or semantics
  • Ensure logical source order matches visual order for screen readers
  • Hover effects are disabled when prefers-reduced-motion is set
  • Border thickness increases in prefers-contrast: more mode

Guidance

Use when

  • Feature grids with one hero tile and supporting tiles
  • Dashboards where cards carry different weight
  • Marketing sections with mixed-size blocks

Avoid when

  • Uniform tiles of one size (use Grid)
  • Labelled form fields (use Grid)
  • A single column of content (use Stack)

Related

  • GridalternativeUse Grid for uniform layouts; BentoGrid for asymmetric spans with built-in surfaces
  • CardsiblingBentoGrid.Item has built-in surface styling similar to Card

Next steps