TanStack Design System
A living catalog of the design tokens and components that power TanStack sites, library docs, and landing pages. Everything here renders with the real production styles — toggle light/dark from the navbar to preview both.
How to use this
Phase 1 is a copy-paste registry. Browse a component, open its code, and copy it into your site. Tokens live in app.css and are shared across every TanStack surface.
Styles
Colors
Styles
Typography
Styles
Iconography
Styles
Icon Migration
Styles
Shadows
Styles
Effects
Figma Tokens
Palette
Figma Tokens
Semantic Tokens
Components
Buttons
Components
Badges
Components
Inputs
Components
Dropdown
Components
Avatar
Components
Spinner
Components
Collapsible
Components
Breadcrumbs
Components
Cards & Surfaces
Components
Navbar