Install

Shadcn Headless Table needs Svelte 5 and Tailwind CSS 4. Everything else it uses (Svelte Headless Table, Svelte Virtual List and shadcn-svelte) is installed with it.

1. Install the package.

   npm

   npm install shadcn-svelte-headless-table

   pnpm

   pnpm add shadcn-svelte-headless-table

   yarn

   yarn add shadcn-svelte-headless-table

2. Import the stylesheet after Tailwind in your global CSS. It makes Tailwind scan the library for the classes it uses and defines the standard shadcn-svelte tokens.

   @import 'tailwindcss';
   @import 'shadcn-svelte-headless-table/styles.css';

3. Optionally, define your own shadcn tokens after that import. If your app already has a shadcn-svelte setup, the table uses your tokens as they are. See Theming.

SvelteKit and Astro

The package ships .svelte files, so a bundler that understands Svelte is needed. SvelteKit, Vite with @sveltejs/vite-plugin-svelte, and Astro with @astrojs/svelte all do. In Astro, render the table in an island with a client directive (this site uses client:load).

Requirements

Requirement	Version
Svelte	5.30+
Node	20+