Preview

Import

import { SigilGrid, SigilGridCell } from "@sigil-ui/components";

Usage

<SigilGrid columns={3}>
  <SigilGridCell>Cell 1</SigilGridCell>
  <SigilGridCell>Cell 2</SigilGridCell>
  <SigilGridCell>Cell 3</SigilGridCell>
  <SigilGridCell>Cell 4</SigilGridCell>
  <SigilGridCell>Cell 5</SigilGridCell>
  <SigilGridCell>Cell 6</SigilGridCell>
</SigilGrid>

The grid renders a subtle dot pattern at cell intersections using the --s-border color. This is the signature visual of Sigil UI — a calibration-grid aesthetic that emerges from the token system.

Columns

<SigilGrid columns={2}>...</SigilGrid>
<SigilGrid columns={3}>...</SigilGrid>
<SigilGrid columns={4}>...</SigilGrid>
<SigilGrid columns={5}>...</SigilGrid>
<SigilGrid columns={6}>...</SigilGrid>

Custom gap

{/* Pixel value */}
<SigilGrid columns={3} gap={32}>...</SigilGrid>

{/* CSS variable */}
<SigilGrid columns={3} gap="var(--s-rail-gap)">...</SigilGrid>

When no gap is specified, the grid uses --s-grid-cell (default 48px).

Cell hover

SigilGridCell includes a built-in hover effect that highlights the cell with --s-surface-elevated:

<SigilGrid columns={3}>
  <SigilGridCell>
    <h3>Feature one</h3>
    <p>Hover to highlight</p>
  </SigilGridCell>
  <SigilGridCell>
    <h3>Feature two</h3>
    <p>Subtle surface shift</p>
  </SigilGridCell>
</SigilGrid>

Feature grid pattern

A common layout for landing pages:

<SigilGrid columns={3} gap={24}>
  <SigilGridCell>
    <Stack gap={8}>
      <TokensIcon className="size-6 text-[var(--s-primary)]" />
      <h3>One token file</h3>
      <p>Change once, update everywhere. Every component reads
      from the same source.</p>
    </Stack>
  </SigilGridCell>
  <SigilGridCell>
    <Stack gap={8}>
      <AgentIcon className="size-6 text-[var(--s-primary)]" />
      <h3>Agent-friendly</h3>
      <p>Your agent edits one file. No scattered Tailwind
      classes to hunt down.</p>
    </Stack>
  </SigilGridCell>
  <SigilGridCell>
    <Stack gap={8}>
      <PresetIcon className="size-6 text-[var(--s-primary)]" />
      <h3>Ship a preset</h3>
      <p>Ship a preset, not a Tailwind config. Share complete
      themes as typed objects.</p>
    </Stack>
  </SigilGridCell>
</SigilGrid>

Without cells

You can use SigilGrid alone as a CSS Grid without the cell hover wrapper:

<SigilGrid columns={4} gap={16}>
  <div>Plain div</div>
  <div>No hover effect</div>
  <div>Still has the dot grid</div>
  <div>Background pattern</div>
</SigilGrid>

Token integration

CSS Variable	Used for
`--s-grid-cell`	Default gap value
`--s-border`	Dot pattern color
`--s-surface-elevated`	Cell hover background
`--s-cross-arm`	Cross mark arm length (for custom sigil overlays)
`--s-cross-stroke`	Cross mark stroke width
`--s-rail-gap`	Alternative gap value for rail-aligned layouts

Props

SigilGrid

Prop	Type	Default	Description
`columns`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Number of grid columns
`gap`	`string \| number`	`var(--s-grid-cell)`	Gap between cells
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Grid content

Plus all standard <div> HTML attributes.

SigilGridCell

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Cell content