Table

A set of composable table primitives - thin, styled wrappers around native table elements with hairline dividers, a surface background, and restrained typography. Mirrors the familiar shadcn table API so the parts compose the way you expect.

$npx shadcn add @patchui/table

Pricing across available plans.
Plan	Seats	Price
Starter	Up to 3	$0
Team	Up to 20	$49
Enterprise	Unlimited	Custom
Total		3 plans

Usage

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@patchui/react";
 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Plan</TableHead>
      <TableHead align="right">Price</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Team</TableCell>
      <TableCell align="right">$49</TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Table

Prop	Type	Default	Description
scrollable	boolean	true	Wrap the table in a horizontally-scrollable container so wide tables stay usable on narrow viewports.
className	string	-	Additional CSS classes applied to the table element.

TableHead / TableCell

Prop	Type	Default	Description
align	"left" \| "center" \| "right"	"left"	Text alignment for the cell. Right-aligned TableCells also apply tabular-nums for column-aligned numerals.
className	string	-	Additional CSS classes applied to the cell.

Notes

Composition: Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption map directly to the native table elements, so standard HTML attributes pass through.
Numerals: Use align="right" on numeric TableCells to right-align and enable tabular figures for clean column alignment.
Key/value pairs: For simple two-column key/value data, a two-cell TableRow per pair works well; reserve the header row for true tabular data.