Installation

Initialize shadcn/uiCopy Anchor Link

Skip this if the project already uses shadcn/ui. The table needs shadcn/ui on the Radix UI or Base UI base, Tailwind CSS v4 and React 18 or newer; React Aria is not supported. It is built on TanStack Table v9 (@tanstack/react-table 9.3.1 is installed with it); a project still on TanStack Table v8 needs the v9 migration first. Pick your base with the Radix UI | Base UI tabs: the switch in the header does the same for the whole site, the examples included.

pnpm dlx shadcn@latest init --base radix

Add shadcn-tableCopy Anchor Link

Copies the table source into components/ui/shadcn-table/ and installs the shadcn/ui parts and npm packages it needs, in the edition for the selected base. Run it again with --overwrite to update.

pnpm dlx shadcn@latest add https://www.shadcn-table.com/r/radix/shadcn-table.json

Or register the registry once and add items by name. {style} stands for the style in your components.json (radix-nova, base-sera, ...), so this form picks the base on its own.

pnpm dlx shadcn@latest registry add @st=https://www.shadcn-table.com/r/{style}/{name}.jsonpnpm dlx shadcn@latest add @st/shadcn-table

ImportCopy Anchor Link

import { ShadcnTable, useShadcnTable } from '@/components/ui/shadcn-table';

Columns, data and the hook: Usage. Letting an agent do all of this: AI Agent Setup. Every example renders, shows its source and installs for the selected base.