Neumorphism UI

Table

Use Table for structured data that people compare across rows and columns. Choose DataTable when sorting, filtering, or selection is needed.

Preview

Watchlist data

Compare illustrative symbol, price, change, and status values, including a selected row and positive and negative changes.

Watchlist · Data delayed by 10 minutes
SymbolPriceChangeStatus
NVDA$181.92+2.41%Open
005930₩72,400+1.08%Selected
TSLA$318.27−0.64%Watch

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/table

Install the shared base once, then add components and their dependencies with the CLI.

Watchlist data

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/table
Registry JSON

Usage

Add TableCaption, a header row with scoped TableHead cells, and TableBody rows. Keep the data in meaningful table elements so relationships survive small-screen scrolling.

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

export default function Example() {
  return (
    <Table>
      <TableCaption>Workspace projects</TableCaption>
      <TableHeader><TableRow><TableHead scope="col">Project</TableHead><TableHead scope="col">Seats</TableHead></TableRow></TableHeader>
      <TableBody><TableRow><TableCell>Atlas</TableCell><TableCell>12</TableCell></TableRow></TableBody>
    </Table>
  );
}

API Reference

Composes native table, caption, thead, tbody, tfoot, tr, th, and td elements. An outer container provides overflow-x-auto and a neumorphic raised surface.

ComponentPropTypeDefaultDescription
TablechildrenrequiredReact.ReactNode—Arranges the caption and table sections.
TableCaptionchildrenReact.ReactNode—Describes the purpose and data scope of the table.
TableHeadscope"col" | "row" | "colgroup" | "rowgroup"—Specifies the direction of cells described by the header.
TableRowdata-state"selected" | string—Enables the inset state for a selected row.
TableCellcolSpan / rowSpannumber—The native span range for a table cell.

Accessibility

  • 01

    Describe the table purpose with TableCaption, using the sr-only class when it should be visually hidden.

  • 02

    Set scope on column and row headers according to their meaning.

  • 03

    Do not use Table solely for layout; use CSS grid or flex instead.