PixelBentoCell

Surface-aware bento grid cell with span, kind layout, and tone tokens for dashboard collages.

  • Span tokens (1x1, 2x1, 1x2, 2x2, 3x1, 1x3) for collage layouts
  • Kind presets (feature / stat / compact / media) drive internal flex layout
  • Tone-aware border + background + text via shared token system
  • Surface-aware (pixel / linear)
  • Pairs with PixelBento parent grid for column + gap control
Status
stable
Category
layout
Since
v1.7.0

API

import { PixelBentoCell } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
span'1x1' | '2x1' | '1x2' | '2x2' | '3x1' | '1x3''1x1'Columns × rows the cell spans.
variant'feature' | 'stat' | 'compact' | 'media'—Canonical structural variant.
kind'feature' | 'stat' | 'compact' | 'media'—Deprecated. Use variant instead. Retained as alias for one minor.
tone'neutral' | 'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink''neutral'Tone of the chrome.
surface'pixel' | 'linear'—Surface override; defaults to the nearest provider.
borderedbooleanfalseRender with surface-aware border + radius chrome. Defaults to false (no chrome).

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

ref points to <div>.

Accessibility

WCAG target: 2.1 AA

  • polymorphic-cell

Inherits semantics from the rendered element. Provide aria-label or wrap with semantic landmarks (section, article) when the cell carries standalone meaning.

Usage

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

export function Default() {
  return (
    <PixelBento columns={3} gap={4}>
      <PixelBentoCell kind="feature" tone="neutral" span="2x1">
        <h3 className="text-sm font-semibold">Feature cell</h3>
        <p className="text-sm text-retro-muted">Span 2x1 with feature layout.</p>
      </PixelBentoCell>
      <PixelBentoCell kind="stat" tone="cyan" span="1x1">
        <span className="text-xs text-retro-muted">Active</span>
        <strong className="text-2xl">128</strong>
      </PixelBentoCell>
      <PixelBentoCell kind="compact" tone="green" span="1x1">
        <span className="text-sm">Compact</span>
      </PixelBentoCell>
    </PixelBento>
  );
}

Examples

Default

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

export function Default() {
  return (
    <PixelBento columns={3} gap={4}>
      <PixelBentoCell kind="feature" tone="neutral" span="2x1">
        <h3 className="text-sm font-semibold">Feature cell</h3>
        <p className="text-sm text-retro-muted">Span 2x1 with feature layout.</p>
      </PixelBentoCell>
      <PixelBentoCell kind="stat" tone="cyan" span="1x1">
        <span className="text-xs text-retro-muted">Active</span>
        <strong className="text-2xl">128</strong>
      </PixelBentoCell>
      <PixelBentoCell kind="compact" tone="green" span="1x1">
        <span className="text-sm">Compact</span>
      </PixelBentoCell>
    </PixelBento>
  );
}

Tones

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

export function Tones() {
  return (
    <PixelBento columns={3} gap={3}>
      <PixelBentoCell tone="purple" kind="stat">
        <span className="text-xs text-retro-muted">Purple</span>
        <strong className="text-2xl">42</strong>
      </PixelBentoCell>
      <PixelBentoCell tone="gold" kind="stat">
        <span className="text-xs text-retro-muted">Gold</span>
        <strong className="text-2xl">7</strong>
      </PixelBentoCell>
      <PixelBentoCell tone="red" kind="stat">
        <span className="text-xs text-retro-muted">Red</span>
        <strong className="text-2xl">3</strong>
      </PixelBentoCell>
    </PixelBento>
  );
}

Media Cell

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

export function MediaCell() {
  return (
    <PixelBento columns={3} gap={4}>
      <PixelBentoCell kind="media" tone="neutral" span="2x2">
        <div className="flex h-full min-h-[160px] items-center justify-center bg-retro-surface/40 text-sm text-retro-muted">
          Media slot
        </div>
      </PixelBentoCell>
      <PixelBentoCell kind="feature" tone="cyan" span="1x1">
        <h3 className="text-sm font-semibold">Caption</h3>
        <p className="text-sm text-retro-muted">Pairs with media.</p>
      </PixelBentoCell>
    </PixelBento>
  );
}

Related