Component

Table

Primitive table components with consistent border, padding, and hover styles.

Basic table

live editor — edit to update preview

<TableShell>
  <Table>
    <TableHead>
      <Th>Name</Th>
      <Th>Role</Th>
      <Th>Status</Th>
    </TableHead>
    <TableBody>
      <TableRow><Td>Alice</Td><Td>Admin</Td><Td>Active</Td></TableRow>
      <TableRow><Td>Bob</Td><Td>Author</Td><Td>Active</Td></TableRow>
      <TableRow><Td>Carol</Td><Td>Reviewer</Td><Td>Inactive</Td></TableRow>
    </TableBody>
  </Table>
</TableShell>

Props

Prop	Type	Default	Description
TableShell	div wrapper	—	Scrollable container with rounded border. Use as the outermost element.
Table	table	—	Full-width table element.
TableHead	thead + tr	—	Header row with border-bottom and muted text.
Th	th	—	Header cell with px-4 py-3 padding.
TableBody	tbody	—	Adds divide-y between rows.
TableRow	tr	—	Adds hover highlight unless hoverable={false}.
Td	td	—	Data cell with px-4 py-3 padding.