Layout & display

Table

A styled wrapper around <table>. The component itself only applies typography, spacing, and a soft border: you provide the thead and tbody markup. Striped and hoverable variants are opt-in.

The head row takes the band color, the brand at 8% in the surface. A hovered row takes surface-2 and no ring, so it never reads as a second head row. The frame keeps the card's shadow and radius without its top wash, so every row is one color at rest.

Basic

Name	Email	Role	Status
Lina Park	lina@lyeve.com	Admin	Active
Otto Renaud	otto@lyeve.com	Editor	Invited
Maya Carter	maya@lyeve.com	Viewer	Idle

Striped

Name	Role	Status
Lina Park	Admin	Active
Otto Renaud	Editor	Invited
Maya Carter	Viewer	Idle

API

Prop	Type	Default	Description
`striped`	`boolean`	`false`	Alternate row backgrounds.
`hoverable`	`boolean`	`true`	Fill a row with surface-2 under the pointer. A row of header cells only takes no hover.
`fixed`	`boolean`	`false`	Use table-fixed layout (equal column widths).
`label`	`string`	no default	Names the scroll box, so a screen reader announces what the region holds.
`cell`	`'auto' \| 'wrap' \| 'truncate'`	`'wrap'`	What a body cell does with content too wide for its column: wrap breaks a token with no spaces in it mid-string, truncate ends the line with an ellipsis, auto lets the column grow.
`truncateAt`	`string`	`'20rem'`	The width a truncating cell stops at, as any CSS length. One column can set its own through --cell-truncate.
`class`	`string`	no default	Extra classes on the wrapper div.
`children` required	`Snippet`	no default	thead + tbody markup.