I always use Next.js to build my website.
People say that using Shadcn really speeds up the process. So, I have been using it for almost all the websites I create.
But I think I was overcomplicating my websites for no reason.
To be straight, I am not a web developer. What I consider to be complicated might not be complicated for others. Anyway, this time, what I wanted was a website where I could publish my tutorials, with better syntax highlighting, LaTeX, use whatever Markdown editor I prefer, and have version control for my tutorials (some things are not available here).
The problem with shadcn that I encountered was that it felt too generic.
The easiest way to make it unique is to update the color palette.
But this is the color palette Shadcn uses:
Plus their dark mode versions.
There is no way to update this color palette to match my icon myself without spending a significant amount of time on this. I don't even know what where each one of them are used. While it's not required to edit every single one of these colors, I didn't feel comfortable leaving unused colors with default values.
So, I went to tweakcn.com and grabbed the theme that looked the most like my icon (Polaris).
But honestly, it didn't quite match what I wanted. Whenever I try to change a single color somewhere, it breaks something else.
So, I decided to step back and strip Shadcn entirely.
The new color palette only contains 12 colors (24 if you include dark mode), and they are directly based on my icon. None of those colors are unused.
Another problem I encountered is that the radius of the cards and other things didn't change when I updated the --radius in globals.css, which was really frustrating. Things that happen because of my limited expertise.
Anyway, all things are sorted out right now. The site is much simpler and smaller than before, and I am really satisfied with the look (especially the dark mode). Finally, I can now focus on the actual content.
If there are any frontend developers here, I'd love to hear your feedback. Here is the link to the website:
This redesign taught me why sometimes, less is more. What do you think about this one? Have you had any similar experiences where you had to strip down features to make your code less overwhelming?
Top comments (0)