Data & feedback@neumorphism-ui/table

Table

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

@neumorphism-ui/table

Registry JSON

Preview

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

Installation

npx shadcn@latest add @neumorphism-ui/table

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

<Table>
  <TableCaption>Recently installed components</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead scope="col">Component</TableHead>
      <TableHead scope="col">Category</TableHead>
      <TableHead scope="col">Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Dialog</TableCell>
      <TableCell>Overlay</TableCell>
      <TableCell>Ready</TableCell>
    </TableRow>
  </TableBody>
</Table>

API Reference

Component	Prop	Type	Default	Description
`Table`	`children`required	`React.ReactNode`	`—`	Arranges the caption and table sections.
`TableCaption`	`children`	`React.ReactNode`	`—`	Describes the purpose and data scope of the table.
`TableHead`	`scope`	`"col" \| "row" \| "colgroup" \| "rowgroup"`	`—`	Specifies the direction of cells described by the header.
`TableRow`	`data-state`	`"selected" \| string`	`—`	Enables the inset state for a selected row.
`TableCell`	`colSpan / rowSpan`	`number`	`—`	The native span range for a table cell.