Primitive Adaptersregistry/ui/table.tsx/r/table.json

Table

Semantic data table adapter with uppercase monospace column headers, 2.5px ink header rule, and tabular-nums alignment.

Light · Paper.f12-theme-light

Interactive preview

Top 3 recovery channels (7-day window)
Channel	Status	Share	Recovered
Exit-intent offer	Leader	41%	$13,296
Abandoned-cart email	Active	29%	$9,405
Back-in-stock alert	Active	14%	$4,439

Dark · Flashback.f12-theme-dark

Interactive preview

Top 3 recovery channels (7-day window)
Channel	Status	Share	Recovered
Exit-intent offer	Leader	41%	$13,296
Abandoned-cart email	Active	29%	$9,405
Back-in-stock alert	Active	14%	$4,439

Install & copy-in source

shadcn CLI (table.json)

npx shadcn@latest add https://frame12.dev/r/table.json

Usage example (Table)

import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, Tag,
} from '@/components/frame12';

export function RecoveryTable() {
  return (
    <Table>
      <TableCaption>Recent recovered checkouts</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Order</TableHead>
          <TableHead>Intervention</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>ORD-9041</TableCell>
          <TableCell>Abandoned-cart email</TableCell>
          <TableCell><Tag>Recovered</Tag></TableCell>
          <TableCell>$184</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Wraps <table> in an overflow-x: auto container (.f12-table-wrap) so narrow mobile viewports scroll the table without page overflow.
Defaults TableHead to scope="col" for screen-reader cell header association.

GrammarFRAME/12 rules

Design grammar

Uses 2.5px solid --f-rule under thead, 1px solid --f-grid between rows, and 2px solid --f-rule above tfoot.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/table.tsx)
Prop	Type	Default	Description
`TableHead`	`React.ThHTMLAttributes<HTMLTableCellElement>`	`scope="col"`	Header cell defaulting to scope="col" with 2.5px bottom ink border.
`TableCaption`	`React.HTMLAttributes<HTMLTableCaptionElement>`	`optional`	Accessible table caption placed at the bottom edge in monospace type.