layout

SpecGrid

Terminal-style specification grid.

npx chaos add spec-grid

PREVIEW

CPU8

RAM32

USAGE

import { SpecGrid } from '@/components/chaos/layout/spec-grid';

const specs = [
  { label: 'CPU', value: '8', unit: 'cores', highlighted: true },
  { label: 'RAM', value: '32', unit: 'GB' },
  { label: 'Storage', value: '1', unit: 'TB' },
];

<SpecGrid specs={specs} showHeader />

PROPS

PropTypeDefault

specsSpec items {label, value, unit?, description?, icon?, highlighted?}

SpecItem[]-

variantColor variant

"cyan" | "green" | "amber" | "blood""cyan"

columnsGrid columns

number-

showHeaderShow terminal header

booleanfalse

headerTitleHeader title

string"SYSTEM SPECS"

compactCompact mode

booleanfalse

stripedStriped rows

booleanfalse