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

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!

I use shadcn for almost every project. This product not just save my time but provide good contrast colors. Appreciate the work.

@muhammad_salman39 thanks for the kind words!

I use shadcn for almost every project. This product not just save my time but provide good contrast colors. Appreciate the work.

@muhammad_salman39 thanks for the kind words!

shadcn-ui theme generator - MagicFront

Generate your shadcn-ui themes, automatically and easily

Generate your shadcn-ui themes, automatically and easily