Technical
Stack requirements, integration, Figma setup, and how tokens stay in sync.
- What stack does the React code library require?The library is built with React, Tailwind CSS, and Radix UI primitives. It works with any React-based framework, Next.js. TypeScript is supported. We recommend Tailwind CSS v4+ for full compatibility.
- Can I integrate it into an existing project?Yes. Components are designed to drop into existing projects. Install via npm. If your project already uses Tailwind CSS and React, most components work out of the box. Custom token or design system setups may require light configuration to align spacing and color scales.
- What Figma account do I need?You can open and explore the design system with a free Figma account, including all components, tokens, and styles. However, Create UI uses multiple variable modes for light/dark themes and theme variations, and Figma's free plan only supports a single mode per variable collection. To switch between light, dark, and other theme modes, you'll need a Figma Professional plan or higher. If you only work in a single mode, the free plan is enough to get started.
- Are design tokens truly synced between Figma and code?Tokens are defined in Figma as variables and mirrored in the code library as Tailwind config values and CSS custom properties, both are kept in parity. Full automated sync (via Token Studio or Style Dictionary) is on the roadmap. Currently, tokens are updated manually with each release to ensure accuracy.
- When does the Pro Code Library ship?The Pro Code Library ships with v1.0. Pre-sale customers on the Code or Complete plan get automatic access at launch, no additional payment required. Progress is tracked on our public Roadmap, and pre-sale buyers are notified by email the moment it's live.