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
Dropdown
Components
Eyebrow
Components
Inputs
Components
Navbar
Components
Page Header
Components
Panel
Components
Spinner
Components
Stats Section
Components
Tabs