Learn how to explore styles, preview components, customize tokens, and export design systems for your projects.
Create a design system from the web interface and export it for Tailwind CSS, Panda CSS, xstyled, or Chakra UI.
1. Sign in or create an account
Sign in with GitHub, Google, or email to save your favorite styles, access the editor, and sync across devices.
2. Browse styles
Explore the Browse Styles page and the Marketplace to find a design system that fits your project. Filter by framework and preview style cards.
3. Open the style editor and preview
Open a style in the editor to see live previews on real UI components (buttons, cards, inputs) and tweak colors, typography, and spacing tokens.
4. Export for your framework
Use the export panel to generate a ready-to-copy config for Tailwind CSS, Panda CSS, xstyled, or Chakra UI. Tokens include colors, typography, spacing, radius, shadows, and more.
5. Use the config in your project
Paste the generated configuration into your project (e.g. tailwind.config.js, panda.config.ts, or your framework’s theme) and build with consistent design tokens.
