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
Icon Migration
Brand & Styles
Shadows
Brand & Styles
Effects
Figma Tokens
Palette
Figma Tokens
Semantic Tokens
Components
Buttons
Components
Badges
Components
Eyebrow
Components
Inputs
Components
Dropdown
Components
Avatar
Components
Spinner
Components
Collapsible
Components
Breadcrumbs
Components
Cards & Surfaces
Components
Navbar