Documentation

Grid

Pure layout grid for item slots with configurable columns, rows and gap.

import { Icon } from "../icon/index";
import { Slot } from "../slot/index";
import { Grid } from "./index";

export function GridDemo() {
  return (
    <div className="mc-tex-panel inline-block p-6">
      <Grid columns={9}>
        {Array.from({ length: 27 }, (_, index) => (
          <Slot key={index} selected={index === 4}>
            {index === 4 ? <Icon name="diamond" /> : null}
          </Slot>
        ))}
      </Grid>
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/grid

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

import { Grid } from "@tennantite/ui";

CLI copy import

import { Grid } from "@/components/tennantite/grid";

import { Icon } from "../icon/index";
import { Slot } from "../slot/index";
import { Grid } from "./index";

export function GridDemo() {
  return (
    <div className="mc-tex-panel inline-block p-6">
      <Grid columns={9}>
        {Array.from({ length: 27 }, (_, index) => (
          <Slot key={index} selected={index === 4}>
            {index === 4 ? <Icon name="diamond" /> : null}
          </Slot>
        ))}
      </Grid>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
cellSize	number	18	Cell size in GUI px (default 18 — vanilla slot).
columns	number	—	Number of columns (spec §5 #2).
gap	number	0	Gap between cells in GUI px (default 0 — vanilla slots are adjacent).
rows	number	—	Number of rows (auto when omitted).

Source

packages/ui/src/containers/grid/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.