shadcn-ui theme generator - MagicFront

shadcn-ui theme generator - MagicFront

Generate your shadcn-ui themes, automatically and easily

7 followers

Generate beautiful themes for your shadcn-ui interfaces: - Beautiful colors - Create tints and shades based on your brand's colors - Good contrast levels to ensure accessibility - Just copy and paste the generated code
shadcn-ui theme generator - MagicFront gallery image
shadcn-ui theme generator - MagicFront gallery image
shadcn-ui theme generator - MagicFront gallery image
shadcn-ui theme generator - MagicFront gallery image
Free
Launch Team / Built With
NMI Payments
NMI Payments
Don’t Integrate Payments Until You Read This Guide
Promoted

What do you think? …

Anthony Lajusticia
Hi everyone! As developers, my wife and I use shadcn-ui in various projects. shadcn-ui is great, providing us with lots of components, but when we need to customize the theme, it requires a little of work to choose good-looking colors, while ensuring a good level of contrast between the different shades and tints. So we built a little tool that allows us to instantly generate great themes ✨ You can go with the beautiful hand-picked colors from the default Tailwind palette or select custom colors. We try to stay as closely as possible to the chosen colors, while ensuring good contrast levels (it works best with gray as secondary color). Then, you just have to copy and paste the generated code into your CSS and your Tailwind configuration, et voilà! ✨ It works with every project using Tailwind CSS and shadcn-ui (for React, Vue.js and Svelte) with CSS variables for theming. Give it a try and let us know what you think!
Muhammad Salman
I use shadcn for almost every project. This product not just save my time but provide good contrast colors. Appreciate the work.
Anthony Lajusticia
@muhammad_salman39 thanks for the kind words!