shadcnpreset

Tools

Utility tools for decoding, inspecting, and working with shadcn presets.

Preset Theme CSS Generator
Paste a preset code to decode its config, preview it, and copy ready-to-use CSS custom properties.
Preset color contrast checker
Check WCAG contrast for core theme token pairs from a preset code, with light and dark previews.
Shadcn preset variables Figma plugin
Enter a preset code, click generate, and you get light and dark mode variables for the shadcn theme belonging to that preset, perfect for syncing your Figma designs with your codebase.