Documentation
Introduction
Substrate UI is a dense pro workspace component library built on shadcn/ui v2. It gives your React applications the look and feel of professional tools like Linear, Figma, Raycast, and Unity -- without months of custom component development.
What is Substrate UI?
Substrate UI is a variant of shadcn/ui v2 designed specifically for pro workspace applications. Where default shadcn gives you clean, minimal components, Substrate gives you dense, functional, opinionated components that look like they belong in production software -- not a tutorial.
Every component ships with three density modes (compact, comfortable, spacious), a dark-first true neutral palette, and patterns extracted from professional applications. It is not a fork — it is an extension. Your existing shadcn components continue to work alongside Substrate components.
Quick install
Install any Substrate component via the shadcn CLI:
npx shadcn@latest add @substrateui/buttonOr install a dense workspace component:
npx shadcn@latest add @substrateui/tree-viewWhat's included
Substrate UI is organized in tiers, from atomic primitives to a full workspace SDK:
Buttons, inputs, selects, dialogs, data tables, tooltips, popovers, accordions, and more. Every primitive is density-aware and ships with dark/light mode support.
Pre-composed building blocks like stat cards, user menus, search inputs, tree views, code blocks, toolbars, and status bars.
Complete feature implementations: auth flows, settings panels, chat interfaces, node editors, command palettes, and kanban boards.
Full app architectures: Sidebar + Canvas, Multi-Panel, Dashboard Overview, Marketing Landing, Inbox Three-Pane, Settings Layout, and Workspace Layout.
Production-ready app starters: SaaS Dashboard, AI Agent Platform, CRM, Marketplace, and Design Tool.
Headless workspace shell, entity system, module registry, field rendering with AutoForm, and a command dispatcher with hotkeys. Includes 7 template modules: Finance, CRM, Project Management, Design Tool, Data Platform, Admin, and Agent Ops.
Technology
Substrate UI is built on a modern, proven stack:
- --React 19 Server Components, hooks, concurrent features
- --Tailwind CSS v4 CSS-first configuration, custom properties, zero-runtime
- --Radix UI Accessible, unstyled primitives for robust interactive components
- --shadcn/ui v2 Copy-paste component architecture, no lock-in, full ownership
- --TypeScript Full type safety across all components and hooks
Explore
Getting Started
Install Substrate UI, configure fonts and design tokens, and render your first component.
Design Tokens
Explore the true neutral palette, accent colors, spacing system, typography, and CSS custom properties.
Density System
Learn how compact, comfortable, and spacious modes adapt every component to your workspace needs.
Craft & Texture
Button finishes and press physics, the same-hue tint ribbon, eight texture devices, the recession grammar, and the fused-control protocol.
Workspace Shell
Build professional multi-module workspaces with menu bars, toolbars, dock zones, and canvas areas.
Browse Components
Explore 200 components across primitives, blocks, patterns, layouts, and templates.