#What is RadixCN?

RadixCN is a powerful theme generator that lets you build high-quality ShadCN/UI themes using Radix Colors — the same professional color system used by Radix UI. It translates Radix’s well-designed 1-12 step color scales into perfect ShadCN token mappings, giving you better color decisions while keeping the exact same ShadCN component API. Whether you want ready-made Radix families or fully custom palettes, RadixCN makes your themes more consistent, accessible, and visually polished.

#Features ⚡️

• Radix Color Scales: Use proven palettes for neutral surfaces, accents, and brand colors.

• Light & Dark Modes: Automatic, high-quality dual theme generation.

• Bridge Mode: Compatibility layer for teams with existing design systems.

• Perfect Token Mapping: Every ShadCN token mapped to the ideal Radix step.

• One-Click Export: Copy ready-to-use CSS variables instantly.

#Pros and Cons

#Pros ✅

• Professional color foundation using Radix’s battle-tested scales.

• Maintains 100% compatibility with existing ShadCN components.

• Excellent light and dark mode harmony.

• Bridge mode for design system integration.

• Completely free and instant to use.

#Cons ⚠️

• Focused only on colors/themes (not new components).

• Requires understanding of Radix color philosophy for best results.

• No live preview of all components (mainly token-based).

• Limited to color customization rather than full design systems.

#Included Components - Templates 🧩

RadixCN provides theme configurations including:

• Full Radix Color Families (Slate, Indigo, Jade, Tomato, etc.).

• Custom Palette Generator.

• Light + Dark Mode CSS Variables.

• Bridge Mode Token Aliases.

• Complete ShadCN-compatible :root and .dark blocks.

#Pricing 💸

RadixCN is completely free:

• 100% Free with no limits or premium tiers.

• Open for personal and commercial projects.

#Integrations 🧰

• ShadCN/UI: Direct drop-in theme replacement.

• Radix Colors: Professional color system foundation.

• React / Next.js: Works seamlessly with Tailwind CSS.

• Existing Design Systems: Bridge mode for token compatibility.