Can you critique my idea/methodology for a Tailwind UI lib + semantic color system combo?
I am still a pretty entry level dev (~2 years experience), and this is my first UI library. While I think this is a pretty good idea, I don't think I have the experience to be confident about it, so I am hoping you guys can point out some blind spots / pitfalls with this approach.
I've put up a docs site that goes into more detail https://www.chimera-ui.com/, but general idea is this:
- Put a thin wrapper around radix primitives with a layer of default styling, and then allow users to overwrite that styling with tailwind.
- Define a semantic color system and use that color system in the default styling
This means a lot of the predefined Tailwind styles are abstracted away. You could import this
Button component and use without writing any classes,
but under the hood it actually has h-10 py-2 px-4 bg-primary.... applied. You can overwrite those styles by writing classes like you would anywhere else, because the components use tailwind-merge under the hood.
I think the advantages here are:
- You can import components that look great out of the box, but you still get to keep the tailwind flow going
- Cleaner JSX, since a lot of the styles are abstracted away. You also don't need to redefine the same basic styles all over the place.
- By using semantic color names, you don't have to re-style components when you re-use them in other projects. For example, if you have bg-blue-500 on a component, you might have to change it to bg-red-300 when you copy and paste it into another project. Across all of your components, it can be a pain. But if you just use bg-primary, then you just need to change the theme or css variable in one place.
I've been keeping up with Theo's & the rest of Twitter's thoughts on TW. There's part of me that is worried that I am going against TW philosophy in a way, by abstracting some classes away. But then again, Daisy UI does that as well. What do you guys think? Thanks in advance!12 Replies
This is exactly what shadcn has done recently
The color thing seems like it should just be how tailwind does it but I see what u mean
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yeah it's funny - I actually came up with the idea independently but came across his lib. You can see my earliest commits were before he released his lib. But he was much faster than me so I actually used a lot of his code as a starting point, and made sure to credit him in the docs. The execution is different enough though that it warranted a separate lib rather than me contributing to that one.
@hmphry can you give me an example of this? not completely sure what you mean here. The component declarations allow you to pass in a
className which will override any default stylesUnknown User•2y ago
Message Not Public
Sign In & Join Server To View
haha no worries! its basically monday for me too. Btw when you said seems pretty standard - is this approach something you've seen in other places? I've only seen a similar approach with shadcnui, so really curious if there are others doing it this way
You basically provide a default per component, and allow for classes to be overridden when people want to
If I’m understanding correctly at least
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
this sounds like tremor https://tremor.so
Tremor – The React library to build dashboards fast
Tremor – The React library to build dashboards fast
Modular components to build insightful dashboards in a breeze.
@hmphry thanks for the context! why was your team using arbitrary sizes for everything? were they not use using tailwind sizes like p-12?
in defense of the semantic color system, it means you can use the same exact JSX for a success component across 10 different projects all using different greens, without having to change
bg-green-500 to bg-green-400Theme Generator – Chimera
Quickly generate a theme for your project.
the theme generator I built also makes it really easy to define for new themes
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View