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.
Brand & Styles
Logos
Brand & Styles
Colors
Brand & Styles
Typography
Brand & Styles
Iconography
Brand & Styles
Shadows
Brand & Styles
Effects
Figma Tokens
Palette
Figma Tokens
Semantic Tokens
Components
Avatar
Components
Badges
Components
Breadcrumbs
Components
Buttons
Components
Cards & Surfaces
Components
Dialog
Components
Drawer
Components
Dropdown
Components
Eyebrow
Components
Inputs
Components
Navbar
Components
Overlay Audit
Components
Page Header
Components
Panel
Components
Partner Rail
Components
Spinner
Components
Stats Section
Components
Takeover
Components
Tabs