PixelBento

Bento-style grid container with span- and kind-aware cells for feature, stat, compact, and media layouts.

Fixed 3 / 4 / 6 column tracks with token-driven gap spacing
PixelBentoCell with span presets (1x1, 2x1, 1x2, 2x2, 3x1, 1x3)
Cell kinds for feature, stat, compact, and media layouts
Tone- and surface-aware cell styling via tokens
SSR-safe container and cells, with no client state

Status: stable
Category: layout
Since: v1.7.0

API

import { PixelBento } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`columns`	`3 \| 4 \| 6`	`3`	Column count from `lg` up.
`gap`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 \| 12 \| 16`	`4`	Gap token (`stackGap`).

Also takes the native attributes and event handlers of <div> (HTMLAttributes<HTMLDivElement>).

ref points to <div>.

WCAG target: 2.1 AA

semantic-grid-container

Renders as a <div> grid; authors are responsible for the semantic role of bento cells (heading levels, landmark roles, etc.).

Usage

import { PixelBento, PixelBentoCell } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelBento columns={3} gap={4}>
      <PixelBentoCell span="2x2" kind="feature" tone="cyan">
        <strong>Feature</strong>
        <span>Spans 2x2 with a feature layout.</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="stat" tone="green">
        <strong>42</strong>
        <span>Stats</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="compact" tone="gold">
        <span>Compact</span>
      </PixelBentoCell>
      <PixelBentoCell span="2x1" kind="feature" tone="purple">
        <strong>Wide</strong>
        <span>Spans 2x1.</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="media" tone="neutral">
        <div className="h-full w-full bg-retro-surface" />
      </PixelBentoCell>
    </PixelBento>
  );
}

Examples

Default

import { PixelBento, PixelBentoCell } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelBento columns={3} gap={4}>
      <PixelBentoCell span="2x2" kind="feature" tone="cyan">
        <strong>Feature</strong>
        <span>Spans 2x2 with a feature layout.</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="stat" tone="green">
        <strong>42</strong>
        <span>Stats</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="compact" tone="gold">
        <span>Compact</span>
      </PixelBentoCell>
      <PixelBentoCell span="2x1" kind="feature" tone="purple">
        <strong>Wide</strong>
        <span>Spans 2x1.</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="media" tone="neutral">
        <div className="h-full w-full bg-retro-surface" />
      </PixelBentoCell>
    </PixelBento>
  );
}

Four Columns

import { PixelBento, PixelBentoCell } from '@pxlkit/ui-kit';

export function FourColumns() {
  return (
    <PixelBento columns={4} gap={3}>
      <PixelBentoCell span="2x2" kind="feature" tone="cyan">
        <strong>Hero</strong>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="stat" tone="green">
        <strong>12</strong>
        <span>Active</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="stat" tone="gold">
        <strong>87%</strong>
        <span>Uptime</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="compact" tone="red">
        <span>Alert</span>
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="compact" tone="purple">
        <span>Tag</span>
      </PixelBentoCell>
    </PixelBento>
  );
}

Cell Tones

import { PixelBento, PixelBentoCell } from '@pxlkit/ui-kit';

export function Cells() {
  return (
    <PixelBento columns={3} gap={4}>
      <PixelBentoCell span="1x1" kind="feature" tone="neutral">
        Neutral
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="feature" tone="cyan">
        Cyan
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="feature" tone="green">
        Green
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="feature" tone="gold">
        Gold
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="feature" tone="red">
        Red
      </PixelBentoCell>
      <PixelBentoCell span="1x1" kind="feature" tone="purple">
        Purple
      </PixelBentoCell>
    </PixelBento>
  );
}

Related