Lucent UI
← CodeBlockTableSpinner →
✦ LLM-ready

Table

atom

Lightweight token-styled HTML table with compound sub-components. Distinct from DataTable — no sorting, filtering, or pagination. Use for static reference data, props tables, and comparison grids.

"Add a Table from lucent-ui with Table.Head, Table.Body, Table.Row, and Table.Cell sub-components. Include column headers."

Usage

React / JSX
import { Table } from 'lucent-ui'

<Table />

Installation

pnpm add lucent-ui

API Reference

Table props — * required

PropTypeDefaultDescription
stripedbooleanfalseApplies alternating bgMuted backgrounds to even tbody rows.
Table.Headcomponent—Renders <thead> with bgMuted background. Accepts Table.Row children.
Table.Bodycomponent—Renders <tbody>. Accepts Table.Row children.
Table.Footcomponent—Renders <tfoot> with bgMuted background.
Table.Rowcomponent—Renders <tr> with a hover highlight. Accepts Table.Cell children.
Table.Cellcomponent—Renders <td> by default or <th scope="col"> when as="th". Header cells are semibold; data cells are regular weight.