Stack

Exact versions pinned in this repository. This repo upgrades first; the four consumers follow through releases of @nitti-ai/design-system.

Releases

The package is versioned, and every change a product would notice is written down as it is made (a changeset). A patch is a fix; a minor is something new, or a change in look that products get for free; a major means a product has to act, and says what to change. Before 1.0.0 a breaking change is a minor that starts with Breaking.

0.1.0@nitti-ai/design-system 0.1.0

0.1.0

Minor Changes

First version. The shared design system for Nitti Intelligence and Polyther.
- Tokens for colour, type, radius, shadow and motion, with the two brand accents in light and dark.
- The components, on Base UI, each in the design language: buttons, fields, menus, dialogs, tables, tabs and the rest, with AlertDialog, Command, Calendar, Item, ScrollArea, ButtonGroup and toasts.
- The app shell, the composer and its pickers, the widget grid, and the marks and lockups with their motion.
- Documents: the reading styles, the shared document page with its contents and sources, and the editor's controls for a BlockNote view.
- Data: DataTable with its column kinds and card layout, charts on TanStack Charts, the parties of the Riksdag, PersonCard and record pages.
- For a product adopting it: GUIDE.md, ADOPTING.md and the design-doctor checker.

Versions

Package	Version	Notes
next	16.4.0	App Router, Turbopack, Cache Components, typed routes
react	19.3.0	React Compiler on (Rust port inside Turbopack)
tailwindcss	4.3.3	CSS-first config: @theme inline, @source, @custom-variant
shadcn	4.21.4	CLI and shadcn/tailwind.css; style base-nova
@base-ui/react	1.9.0	Primitive layer under every component
typescript	7.0.2	TypeScript 7 native compiler; next build runs tsc
lucide-react	1.54.0	Icon set, drawn at a 1.6 stroke
motion	14.0.0	Motion for React, the motion library: drags, things making room, anything interruptible. Presets in lib/motion
@tanstack/charts	1.1.0	TanStack Charts, the chart engine: marks, scales and guides. The shared look and builders are in lib/chart; both products draw saved charts with it through @nitti-ai/charts
@tanstack/react-table	9.2.8	TanStack Table v9, the state behind DataTable: sorting, filters, selection, column order, sizes and pinning. The same version Nitti Intelligence runs
@blocknote/shadcn	0.54.2	BlockNote, the document editor in both products, with its core and React packages at the same version. Installed by the app, not by the design system
turbo	2.11.7	Monorepo task runner
oxlint	1.87.0	Linter (works without the TypeScript JS API)
bun	1.4.2	Package manager · Node >=24

Rules for consuming apps

Import @nitti-ai/design-system/globals.css once, from the root layout. Do not redefine its tokens locally.
Load Geist, Geist Mono and Instrument Serif with next/font as --font-geist, --font-geist-mono and --font-instrument-serif, and set data-brand on <html> (Nitti is the default).
Add @nitti-ai/design-system to transpilePackages in next.config.ts.
Use semantic utilities (bg-background, bg-card, text-muted-foreground, bg-success-surface). Never raw hex or Tailwind palette colours.
Separate areas by fill and space, not borders. Hairlines (border-border) are for rows of data only.
Instrument Serif (font-display, text-display/headline/title) for page-setting moments; Geist for everything else; Geist Mono for data only, never for navigation or labels.
Animate with the motion tokens: ease-ios, ease-spring, ease-leave and --motion-fast/base/slow. Every animation needs a reduced-motion outcome.
Motion for React (motion/react) is the motion library. Use it for anything that follows the pointer, makes room or can be interrupted, with the named transitions in @nitti-ai/design-system/lib/motion (springs.makeRoom, settle, lift, snap; leave; instant). Keep CSS for entrances, hovers and loops, which run before JavaScript.
Base UI composes with the render prop, not asChild: <DialogTrigger render={<Button />}>.
Build a missing component here first, then release it; do not fork a shared component inside an app.