tablekit

Install

Install tablekit with npm, the shadcn CLI, or an AI agent.

npm

npm install @tablekit/react

Import the styles once, for example in your root layout:

import "@tablekit/react/styles.css"; // tokens + component styles

shadcn CLI

This copies the source into your project (components/tablekit/) and adds no runtime npm dependency except zod:

npx shadcn@latest add https://tablekit.amitpatjoshi.com/r/tablekit.json

Then import from your own folder:

import { DataTable } from "@/components/tablekit";

The registry item already includes the shadcn preset, so the table picks up your --background, --primary, --radius and other variables automatically.

AI agent

Paste this into Claude Code, Cursor, Copilot, v0 or Lovable:

Install tablekit (https://tablekit.amitpatjoshi.com/llms.txt) and replace the
table on the orders page with <DataTable schema={…} />. Follow its AGENTS.md rules.

If your agent has the shadcn MCP server, it can find and install the registry item itself.

Load Inter

tablekit is set in Inter. Numbers in the table use three Inter features: tabular figures ("tnum"), so columns of amounts, counts and dates line up digit for digit; a slashed zero ("zero"), so 0 never reads as O; and open digits ("ss01"), Inter’s alternate 1, 3, 4, 6 and 9. The package doesn’t bundle the font, so load it once:

npm install @fontsource-variable/inter
import "@fontsource-variable/inter";

Or use the official CDN: <link rel="stylesheet" href="https://rsms.me/inter/inter.css">. If Inter isn’t available, the table falls back to the system UI font.

Use a design-system preset

If you use styles.css, add one preset import after it. Presets only remap --tk-* variables, so import order doesn’t affect specificity.

@import "@tablekit/react/styles.css";
@import "@tablekit/tokens/presets/shadcn.css";   /* or material3.css, carbon.css, radix.css */

See Theming & design systems.

Requirements

  • React 18 or 19. Everything is SSR-safe, and the build ships a "use client" banner for the Next.js App Router.
  • Any evergreen browser. The component uses container queries, color-mix() and :where().