Table

Ruled data table with hairline row separators.

Recent deployments
Service	Status
api-gateway	Healthy
worker	Deploying

Installation

terminal

npx felicityui add table --platform react

Usage

example.tsx

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Service</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>api-gateway</TableCell>
      <TableCell>Healthy</TableCell>
    </TableRow>
  </TableBody>
</Table>

Composition

Table
├── caption (optional)
├── TableHeader
│   └── TableRow
│       └── TableHead
└── TableBody
    └── TableRow
        └── TableCell

Ruled data table with hairline row separators.

FelicityUI uses native HTML, semantic tokens, and ruled surfaces. Install with felicityui add table --platform react.

Ruled table

Hairline row rules inside a bordered surface — editorial, not spreadsheet chrome.

Recent deployments
Service	Status
api-gateway	Healthy
worker	Deploying

API Reference

Prop	Type	Default	Description
className	string	—	Additional classes.

Accessibility

WCAG 2.2 AA

Native semantics and keyboard support.
Visible focus indicator.
Sufficient contrast on semantic token pairs.

Platform notes

React

Native HTML with Felicity semantic tokens. Paper/ink surfaces, copper accent used sparingly, hairline borders, and ruled layouts — not generic SaaS chrome.

Server Component compatible unless marked use client.
Uses data-slot attributes for anatomy.
Focus-visible rings use color.focus.ring.