# Table
URL: /design/components/table

A print-register data table with hairline rules and mono headers.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component TableSpecimen omitted]

Code for TableSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

function TableSpecimen(): ReactNode {
  return (
    <Table>
      <TableCaption>Radius scale of the design system.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Token</TableHead>
          <TableHead>Value</TableHead>
          <TableHead>Applies to</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>
            <code>--radius-control</code>
          </TableCell>
          <TableCell>8px</TableCell>
          <TableCell>Buttons, inputs, menu items</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <code>--radius-surface</code>
          </TableCell>
          <TableCell>10px</TableCell>
          <TableCell>Cards, popovers, panels</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <code>--radius-xl</code>
          </TableCell>
          <TableCell>12px</TableCell>
          <TableCell>Dialogs, large surfaces</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <code>--radius-thread</code>
          </TableCell>
          <TableCell>16px</TableCell>
          <TableCell>The chat viewport</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}
```

## Installation

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

- code

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; /\*\* \* A print-register data table: an opening hairline, a hairline under every \* row, and no vertical rules or fills. The wrapper scrolls horizontally so \* wide tables never scroll the page. \*/ export function Table({ className, ...props }: ComponentProps<"table">) { return ( \<div className="not-prose relative w-full overflow-x-auto"> \<table className={cn( "border-foreground/10 w-full caption-bottom border-t text-sm", className, )} {...props} /> \</div> ); } export function TableHeader({ className, ...props }: ComponentProps<"thead">) { return \<thead className={cn(className)} {...props} />; } export function TableBody({ className, ...props }: ComponentProps<"tbody">) { return \<tbody className={cn(className)} {...props} />; } export function TableFooter({ className, ...props }: ComponentProps<"tfoot">) { return ( \<tfoot className={cn("text-foreground font-medium", className)} {...props} /> ); } export function TableRow({ className, ...props }: ComponentProps<"tr">) { return ( \<tr className={cn("border-foreground/10 border-b", className)} {...props} /> ); } export function TableHead({ className, ...props }: ComponentProps<"th">) { return ( \<th className={cn( "text-muted-foreground h-9 px-3 text-start align-middle font-mono text-\[11px] font-medium tracking-wide whitespace-nowrap first:ps-0 last:pe-0", className, )} {...props} /> ); } export function TableCell({ className, ...props }: ComponentProps<"td">) { return ( \<td className={cn( "px-3 py-2.5 align-top leading-relaxed first:ps-0 last:pe-0", className, )} {...props} /> ); } export function TableCaption({ className, ...props }: ComponentProps<"caption">) { return ( \<caption className={cn( "text-muted-foreground mt-3 text-start font-mono text-\[11px] tracking-wide", className, )} {...props} /> ); }

* title

  components/ui/table.tsx

* copyText

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; /\*\* \* A print-register data table: an opening hairline, a hairline under every \* row, and no vertical rules or fills. The wrapper scrolls horizontally so \* wide tables never scroll the page. \*/ export function Table({ className, ...props }: ComponentProps<"table">) { return ( \<div className="not-prose relative w-full overflow-x-auto"> \<table className={cn( "border-foreground/10 w-full caption-bottom border-t text-sm", className, )} {...props} /> \</div> ); } export function TableHeader({ className, ...props }: ComponentProps<"thead">) { return \<thead className={cn(className)} {...props} />; } export function TableBody({ className, ...props }: ComponentProps<"tbody">) { return \<tbody className={cn(className)} {...props} />; } export function TableFooter({ className, ...props }: ComponentProps<"tfoot">) { return ( \<tfoot className={cn("text-foreground font-medium", className)} {...props} /> ); } export function TableRow({ className, ...props }: ComponentProps<"tr">) { return ( \<tr className={cn("border-foreground/10 border-b", className)} {...props} /> ); } export function TableHead({ className, ...props }: ComponentProps<"th">) { return ( \<th className={cn( "text-muted-foreground h-9 px-3 text-start align-middle font-mono text-\[11px] font-medium tracking-wide whitespace-nowrap first:ps-0 last:pe-0", className, )} {...props} /> ); } export function TableCell({ className, ...props }: ComponentProps<"td">) { return ( \<td className={cn( "px-3 py-2.5 align-top leading-relaxed first:ps-0 last:pe-0", className, )} {...props} /> ); } export function TableCaption({ className, ...props }: ComponentProps<"caption">) { return ( \<caption className={cn( "text-muted-foreground mt-3 text-start font-mono text-\[11px] tracking-wide", className, )} {...props} /> ); }

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; /\*\* \* A print-register data table: an opening hairline, a hairline under every \* row, and no vertical rules or fills. The wrapper scrolls horizontally so \* wide tables never scroll the page. \*/ export function Table({ className, ...props }: ComponentProps<"table">) { return ( \<div className="not-prose relative w-full overflow-x-auto"> \<table className={cn( "border-foreground/10 w-full caption-bottom border-t text-sm", className, )} {...props} /> \</div> ); } export function TableHeader({ className, ...props }: ComponentProps<"thead">) { return \<thead className={cn(className)} {...props} />; } export function TableBody({ className, ...props }: ComponentProps<"tbody">) { return \<tbody className={cn(className)} {...props} />; } export function TableFooter({ className, ...props }: ComponentProps<"tfoot">) { return ( \<tfoot className={cn("text-foreground font-medium", className)} {...props} /> ); } export function TableRow({ className, ...props }: ComponentProps<"tr">) { return ( \<tr className={cn("border-foreground/10 border-b", className)} {...props} /> ); } export function TableHead({ className, ...props }: ComponentProps<"th">) { return ( \<th className={cn( "text-muted-foreground h-9 px-3 text-start align-middle font-mono text-\[11px] font-medium tracking-wide whitespace-nowrap first:ps-0 last:pe-0", className, )} {...props} /> ); } export function TableCell({ className, ...props }: ComponentProps<"td">) { return ( \<td className={cn( "px-3 py-2.5 align-top leading-relaxed first:ps-0 last:pe-0", className, )} {...props} /> ); } export function TableCaption({ className, ...props }: ComponentProps<"caption">) { return ( \<caption className={cn( "text-muted-foreground mt-3 text-start font-mono text-\[11px] tracking-wide", className, )} {...props} /> ); }

## 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.                 |