Table

Radius scale of the design system.
Token	Value	Applies to
`--radius-control`	8px	Buttons, inputs, menu items
`--radius-surface`	10px	Cards, popovers, panels
`--radius-xl`	12px	Dialogs, large surfaces
`--radius-thread`	16px	The chat viewport

Installation

Copy the source into components/ui/table.tsx. Registry items that depend on it install it automatically.

components/ui/table.tsx

Usage

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Token</TableHead>
          <TableHead>Value</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>--radius-control</TableCell>
          <TableCell>8px</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

The table opens with a hairline, closes with one under the last row, and draws no vertical rules or fills. The wrapper scrolls horizontally on its own, so a wide table never scrolls the page.

Examples

In articles

Markdown tables on this site render through these parts automatically; the API reference below is one.

API Reference

Every part renders its native element and accepts that element's props.

Part	Element	Role
`Table`	`table`	Scroll wrapper plus the table surface.
`TableHeader`	`thead`	Header row group.
`TableBody`	`tbody`	Data rows.
`TableFooter`	`tfoot`	Closing rows, set in medium weight.
`TableRow`	`tr`	One row, closed by a hairline.
`TableHead`	`th`	Mono column label.
`TableCell`	`td`	One cell, top-aligned for multi-line content.
`TableCaption`	`caption`	Mono caption below the table.