Table

Data table with header, body, and caption. Choose a surface frame: content panel (default), hairline border, or none when the parent already owns the surface.

Content surface (default)

Own content panel — use when the table is the primary work surface on the scene.

Recent payment transactions.
Date	Account	Amount	Status
Jun 02, 2026	Lake Summit Resort	$142.00	Paid
Jun 04, 2026	Blue Ridge Camp	$89.50	Pending
Jun 07, 2026	Pine Valley	$310.00	Paid
Jun 09, 2026	Cedar Cove	$57.25	Failed
Jun 11, 2026	Lake Summit Resort	$204.75	Paid

<Table>
  <TableHeader>…</TableHeader>
  <TableBody>…</TableBody>
</Table>

// same as surface="content" or surface={true}

Hairline surface

Mid-radius frame with a hairline border. Valid on the scene or nested inside a Card — not a second frosted panel.

Recent payment transactions.
Date	Account	Amount	Status
Jun 02, 2026	Lake Summit Resort	$142.00	Paid
Jun 04, 2026	Blue Ridge Camp	$89.50	Pending
Jun 07, 2026	Pine Valley	$310.00	Paid
Jun 09, 2026	Cedar Cove	$57.25	Failed
Jun 11, 2026	Lake Summit Resort	$204.75	Paid

<Table surface="hairline">
  <TableHeader>…</TableHeader>
  <TableBody>…</TableBody>
</Table>

Nested in a Card

Prefer surface="hairline" inside a Card. Use surface={false} only when the parent already draws the frame.

Ledger lines

Recent payment transactions.
Date	Account	Amount	Status
Jun 02, 2026	Lake Summit Resort	$142.00	Paid
Jun 04, 2026	Blue Ridge Camp	$89.50	Pending
Jun 07, 2026	Pine Valley	$310.00	Paid
Jun 09, 2026	Cedar Cove	$57.25	Failed
Jun 11, 2026	Lake Summit Resort	$204.75	Paid

<Card>
  <CardHeader>
    <CardTitle>Ledger lines</CardTitle>
  </CardHeader>
  <CardContent>
    <Table surface="hairline">…</Table>
  </CardContent>
</Card>