Tailwind CSS and shadcn/ui

Both grids work in a Tailwind CSS app without configuration, and they can wear your shadcn/ui theme — light and dark — with one small CSS file. This site is itself built with Tailwind CSS v4.

Tailwind CSS

Nothing to configure. The grids ship plain CSS scoped under their own root classes (.kanuni-datagrid-root, .kanuni-pivot-root), so they do not depend on Tailwind and Tailwind does not need to scan them.

Tailwind v4 puts its reset (preflight) in the base cascade layer. The DataGrid stylesheet is not layered, and unlayered CSS wins over any layer; the PivotGrid stylesheet keeps its rules unlayered too, and its own utility classes in the utilities layer, which comes after base — each one scoped under .kanuni-pivot-root, so it applies inside the grid and nowhere in your app. Either way the reset cannot flatten the grids' buttons or inputs, whatever order you import in. Import the stylesheets once, where you import your global CSS:

import '@kanunilabs/datagrid-react/styles.css';
import '@kanunilabs/pivotgrid-react/styles.css';

Utility classes on the grid itself are for layout — size, margin, a frame — through className or a wrapper. Colours and metrics go through the CSS variables below, so they also reach the menus and dialogs the grid opens on <body>.

shadcn/ui

shadcn/ui keeps its theme in CSS variables (--background, --foreground, --primary, --border, --radius, …) and switches them under .dark. The grids draw every colour from their own variables (--dg-*, --pivot-*), so pointing one set at the other is the whole integration: change your shadcn theme, or toggle dark mode, and the grids follow.

Add this file next to your globals.css (shadcn/ui on Tailwind v4, where the variables hold complete colours such as oklch(…)):

/* grid-shadcn.css — the grids in your shadcn/ui theme */
.kanuni-datagrid-root.kanuni-datagrid-palette-shadcn,
.kanuni-datagrid-enterprise.kanuni-datagrid-palette-shadcn,
.kanuni-datagrid-detached.kanuni-datagrid-palette-shadcn {
  color-scheme: inherit;
  --dg-bg: var(--background);
  --dg-surface: var(--background);
  --dg-surface-hover: var(--muted);
  --dg-surface-stripe: color-mix(in oklab, var(--muted) 45%, var(--background));
  --dg-surface-header: var(--muted);
  --dg-header-bg: var(--muted);
  --dg-header-text: var(--foreground);
  --dg-header-text-muted: var(--muted-foreground);
  --dg-group-bg: var(--muted);
  --dg-footer-bg: var(--muted);
  --dg-selected-bg: var(--accent);
  --dg-text: var(--foreground);
  --dg-text-muted: var(--muted-foreground);
  --dg-primary: var(--primary);
  --dg-on-primary: var(--primary-foreground);
  --dg-primary-soft: color-mix(in oklab, var(--primary) 12%, transparent);
  --dg-focus-ring: var(--ring);
  --dg-danger: var(--destructive);
  --dg-border: var(--border);
  --dg-border-strong: var(--input);
  --dg-radius: var(--radius);
  --dg-radius-control: calc(var(--radius) - 2px);
}

.kanuni-pivot-root[data-theme='shadcn'] {
  color-scheme: inherit;
  --pivot-bg: var(--background);
  --pivot-surface: var(--card);
  --pivot-surface-hover: var(--muted);
  --pivot-surface-header: var(--muted);
  --pivot-header-bg: var(--muted);
  --pivot-header-text: var(--foreground);
  --pivot-text: var(--foreground);
  --pivot-text-muted: var(--muted-foreground);
  --pivot-text-header: var(--foreground);
  --pivot-border: var(--border);
  --pivot-border-strong: var(--input);
  --pivot-primary: var(--primary);
  --pivot-primary-foreground: var(--primary-foreground);
  --pivot-primary-hover: color-mix(in oklab, var(--primary) 85%, var(--foreground));
  --pivot-control-accent: var(--primary);
  --pivot-danger: var(--destructive);
  --pivot-modal-bg: var(--popover);
  --pivot-border-radius: var(--radius);
}

Then name the scheme on each grid:

import './grid-shadcn.css';

<DataGrid palette="shadcn" … />
<BasePivotGrid theme={{ id: 'shadcn' }} … />

On shadcn/ui for Tailwind v3, the variables hold bare HSL numbers (--primary: 222.2 47.4% 11.2%); wrap each one, var(--primary) becoming hsl(var(--primary)).

The packaged colour schemes are measured for contrast; a mapping like this one inherits whatever contrast your shadcn theme has. For a theme that is checked instead, paste your globals.css into the Theme Builder ("Using shadcn/ui?" on the Schemes tab): it reads the :root and .dark blocks — oklch(), the Tailwind v3 HSL numbers, hex or rgb() — derives every colour the grids draw from --background, --card, --foreground, --primary, --muted, --border and --destructive, deepens what would be hard to read, and exports a stylesheet. That theme is fixed: it does not follow later changes to your variables the way the mapping above does. Theming lists every variable.