All components
line
inset
outline
sm
md
lg
Table
Tabular data with line, inset, and outline treatments across three densities.
| Name | Role | Status |
|---|---|---|
| Ava Chen | Design Engineer | Active |
| Noah Patel | Frontend Developer | Active |
| Mia Torres | Product Designer | Invited |
| Liam Novak | Engineering Manager | Active |
Variants
| Name | Role | Status |
|---|---|---|
| Ava Chen | Design Engineer | Active |
| Noah Patel | Frontend Developer | Active |
| Mia Torres | Product Designer | Invited |
| Liam Novak | Engineering Manager | Active |
| Name | Role | Status |
|---|---|---|
| Ava Chen | Design Engineer | Active |
| Noah Patel | Frontend Developer | Active |
| Mia Torres | Product Designer | Invited |
| Liam Novak | Engineering Manager | Active |
| Name | Role | Status |
|---|---|---|
| Ava Chen | Design Engineer | Active |
| Noah Patel | Frontend Developer | Active |
| Mia Torres | Product Designer | Invited |
| Liam Novak | Engineering Manager | Active |
Sizes
| Name | Role | Status |
|---|---|---|
| Ava Chen | Design Engineer | Active |
| Noah Patel | Frontend Developer | Active |
| Mia Torres | Product Designer | Invited |
| Liam Novak | Engineering Manager | Active |
| Name | Role | Status |
|---|---|---|
| Ava Chen | Design Engineer | Active |
| Noah Patel | Frontend Developer | Active |
| Mia Torres | Product Designer | Invited |
| Liam Novak | Engineering Manager | Active |
| Name | Role | Status |
|---|---|---|
| Ava Chen | Design Engineer | Active |
| Noah Patel | Frontend Developer | Active |
| Mia Torres | Product Designer | Invited |
| Liam Novak | Engineering Manager | Active |
Install
zsh — table
1bunx stylexblocks add tableUsage — Ark UI
table.tsx
123456789101112131415161718192021222324252627282930313233import { Table } from "#components/ui/ark-ui/table.tsx";
const members = [ ["Ava Chen", "Design Engineer", "Active"], ["Noah Patel", "Frontend Developer", "Active"],];
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via context <Table.Root variant="line" size="md"> <Table.Header> <Table.Row> <Table.ColumnHeader>Name</Table.ColumnHeader> <Table.ColumnHeader>Role</Table.ColumnHeader> <Table.ColumnHeader>Status</Table.ColumnHeader> </Table.Row> </Table.Header> <Table.Body> {members.map(([name, role, status]) => ( <Table.Row key={name}> <Table.Cell>{name}</Table.Cell> <Table.Cell>{role}</Table.Cell> <Table.Cell>{status}</Table.Cell> </Table.Row> ))} </Table.Body> </Table.Root> );}
// composition works per part — e.g. link a cell's content:// <Table.Cell asChild><a href="/members/ava">Ava Chen</a></Table.Cell>