Basic Table
A static table with a caption and clean borders.
Basic Table rendered preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-003 | Unpaid | Transfer | $350.00 |
Docs
Data feedback
Table
Structured tabular layout for displaying rows and columns.
5 examplesData ComponentReact 19 & Next.js 16Tailwind CSS v4
pnpm add @quinkit/uiimport { Table } from "@quinkit/ui";Interactive Examples
Live previews · code · themes · viewport · dark mode
Badges & Row Actions
Status badges and a row action dropdown column.
Badges & Row Actions rendered preview
| Name | Role | Status | Actions |
|---|---|---|---|
| Ada Lovelace | Owner | Active | |
| Alan Turing | Admin | Active | |
| Grace Hopper | Member | Invited |
Responsive Horizontal Overflow
Horizontally scrollable table container on small screens.
Responsive Horizontal Overflow rendered preview
| Product | SKU | Stock | Price |
|---|---|---|---|
| Aurora Headphones | AH-01 | 42 | $299 |
| Nimbus Keyboard | NK-14 | 8 | $149 |
| Halo Mouse | HM-07 | 0 | $79 |
Scrolls horizontally on narrow screens.
Financial Ledger Table
Monospace amounts and status badges for transaction lists.
Financial Ledger Table rendered preview
| Transaction ID | Customer | Status | Amount |
|---|---|---|---|
| TXN-84920 | Acme Corp | Cleared | $4,850.00 |
| TXN-84921 | Stripe Inc | Processing | $1,200.00 |
Empty State Table
Empty placeholder content row when zero data records match.
Empty State Table rendered preview
| Project Name | Owner | Last Active |
|---|---|---|
No Projects Created Yet Create your first repository to begin collaboration. | ||
Overview
Table is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.
Accessibility Details
- Uses semantic HTML or Radix primitives where applicable.
- Interactive components expose keyboard/focus behavior through native controls or Radix.
- ARIA roles, states, and labels are applied where relevant.
Styling
- Uses semantic design tokens such as
bg-background,text-foreground,border-border,bg-popover, andtext-muted-foreground. - Motion-heavy components include reduced-motion compatible classes where applicable.
Accessibility & Keyboard
Table adheres to WAI-ARIA design patterns for accessible web components.
Keyboard Navigation
Tab/Shift + Tab— Focuses control and moves between interactive elements.Space/Enter— Triggers action or toggles selection.Escape— Closes open popovers, overlays, or dropdown menus.
ARIA Standards
- Built with semantic HTML tags and explicit
aria-*attributes. - Uses high-contrast focus rings (
ring-ring) visible in both light & dark mode. - Supports screen readers with non-visual label fallbacks.
Registry Install
Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.
npx shadcn@latest add https://quinkit-ui.vercel.app/r/table.json