I created a collection of UI Components for React built with Tailwind CSS containing over 20 components with over 50 variants.
You can just copy and paste the component you want to use.
The biggest disadvantage of using Tailwind is the risk of having too long classes that will make the code not readable enough.
As React is component-based, we can extract component logic with its classes and reuse them elsewhere which will result in more readable code with more components and less classes.
That's why I created this collection named Kimia-UI and it's fully customizable. If you are a Typescript lover, the full source code and all examples are written in Typescript so you won't worry about types.
The project is open to contributions and you can contribute by adding a component, improving accessibility or opening a new issue for a new component or idea.
Latest comments (36)
Amazing bro !
Please add Snackbar/Toast component.
Good job , nice !
What an incredible job! Thank you for this, I’ll try and contribute as much as I can.
It's amazing +respect
Just curious, did you manage to only purge the unused css?
E.g. if I only use the primary colour, in all the Buttons, throughout my project, would the resulting styles contain also "success", "danger" etcetera... or would the unused styles be purged?
The main idea of this collection is to customize everything according to your needs. By default, all the classes defined for button will be preserved. if you want them to be purged automatically, you can only define the colour that you want to use (eg: primary only).
That makes sense thanks, I quite like the idea behind tailwindcss, but I wish it could allow to use javascript to build the classes...
It’s possible to use JavaScript to build classes with tailwindcss (Css in Js). Check out the library twin-macro
Interesting! I will have a look, thanks for it!
wow cool
These are very nice. I will note that I don't think you've added any event handlers for listening for the "ESC" key when the overlays/toasts are open so the user can dismiss things like menus.
I have fixed it, you can now dismiss toast with ESC key
This is super awesome!
Love this!
(Could have called it Rewind 😂)
😃😃 i chose that name for SEO purpose