Foundations
Library
Technology
Brand
Technology
Our design system is built in layers. Each technology handles a specific concern — from raw HTML structure up to ready-to-use components. Understanding how they stack is essential for building consistent UI.
How It All Fits Together
1
ShadCN
Ready-to-use components — Pre-built, customizable UI components we drop into our app.
2
Radix (Base UI)
Unstyled accessible primitives — Handles keyboard nav, focus management, ARIA — the hard accessibility stuff.
3
Tailwind CSS
Styling system — Utility classes that style everything. Colors, spacing, typography.
4
CSS Variables
Theme colors — Design tokens in globals.css. Change one variable, entire app updates.
5
React
Building the user interface — Components, state, JSX — the framework everything runs on.
6
HTML + CSS
Structure and styling — The foundation. Everything above compiles down to this.
Core Technologies
Tailwind CSS
Utility-first CSS framework. How we write all styles.
Radix
Unstyled accessible primitives. The foundation ShadCN is built on.
ShadCN
Component library built on Radix primitives.
Headless UI Primitives
These libraries provide low-level, unstyled, accessible components (called primitives) that handle complex interactions like modals, dropdowns, and focus management without any visual styling. ShadCN is built on top of one of these.
Radix UIOur stack
Independent open-source project. Currently the most widely used.
Built by Tailwind Labs.
Built by Adobe.
Built by the MUI (Material-UI) team.
Component Libraries
We use ShadCN as our primary component library. But there are other compatible libraries built on the same stack (Tailwind + Radix) that you can pull components from when needed.
ShadCNIn use
Our primary library. Official, most widely used.
Most popular third-party. Animated components, landing page blocks.
Animated, modern components. Good for landing pages and marketing.
Free Tailwind components. Simpler, lighter weight.