DEV Community

Cover image for I created a collection of UI Components for React built with Tailwind CSS

I created a collection of UI Components for React built with Tailwind CSS

Enoch Ndika on March 10, 2021

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 a...
Collapse
 
akallabeth profile image
Graziano Statello

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?

Collapse
 
enochndika profile image
Enoch Ndika

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).

Collapse
 
akallabeth profile image
Graziano Statello

That makes sense thanks, I quite like the idea behind tailwindcss, but I wish it could allow to use javascript to build the classes...

Thread Thread
 
enochndika profile image
Enoch Ndika

It’s possible to use JavaScript to build classes with tailwindcss (Css in Js). Check out the library twin-macro

Thread Thread
 
akallabeth profile image
Graziano Statello

Interesting! I will have a look, thanks for it!

Collapse
 
alonsoaguayo profile image
Alonso Aguayo

What an incredible job! Thank you for this, I’ll try and contribute as much as I can.

Collapse
 
mkubdev profile image
Maxime Kubik

Nice job! Thank you they are super clean. :) Are you Tim Creative's son ? 😇

Collapse
 
enochndika profile image
Enoch Ndika

No i am not 😃

Collapse
 
prnvbirajdar profile image
Pranav Birajdar • Edited

This looks so clean! I just made a post about my favorite Tailwind component libraries.

I'll definitely use your library in my next project and update my list!

Collapse
 
enochndika profile image
Enoch Ndika

Thank you

Collapse
 
luispinheiro profile image
Luis Pinheiro

Great job

Collapse
 
enochndika profile image
Enoch Ndika

thank you

Collapse
 
obonyojimmy profile image
jimmycliff obonyo

Good job , nice !

Collapse
 
rabbitninja profile image
Shubham Mishra

It's amazing +respect

Collapse
 
the_riz profile image
Rich Winter

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.

Collapse
 
enochndika profile image
Enoch Ndika

I have fixed it, you can now dismiss toast with ESC key

Collapse
 
spiritupbro profile image
spiritupbro

wow cool

Collapse
 
efosa_j profile image
Efosa Jeffrey

This is super awesome!

Collapse
 
lukeocodes profile image
@lukeocodes 🕹👨‍💻

Love this!

(Could have called it Rewind 😂)

Collapse
 
enochndika profile image
Enoch Ndika • Edited

😃😃 i chose that name for SEO purpose

Collapse
 
joezakoutta profile image
joezak-outta

Nice job man!
That’s all i was looking for

Collapse
 
enochndika profile image
Enoch Ndika

Thank you

Collapse
 
smblee profile image
Bryan Lee

What's the difference between this and Chakra UI?

Collapse
 
enochndika profile image
Enoch Ndika

Chakra UI is a UI component library and you have to install it. Tailwind CSS is a css utility framework, so it does not come with any components. You have to create all your components from scratch and this can be annoying for experienced developers or difficult for beginners.

That's why I created this collection to simplify that process so you can simply copy and paste any component you want to use and customize it as you wish.

Collapse
 
aalhommada profile image
Abdullah Al Hommada

Nice Job!

Collapse
 
anstroy profile image
Aus G

I will start contributing soon, this project looks amazing, good job

Collapse
 
enochndika profile image
Enoch Ndika

Thank you

Collapse
 
assassin9 profile image
Asjark

Pretty awesome.

Collapse
 
seanmclem profile image
Seanmclem

Is the drop down accessible?

Collapse
 
enochndika profile image
Enoch Ndika

Yeah it's accessible

Collapse
 
tannerkc profile image
Tanner Cottle

These components look really nice, great job! Just one note, the images inside the cards should be rounded, at least at the top two corners so they don't poke out of the card itself.

Collapse
 
enochndika profile image
Enoch Ndika • Edited

Thanks, i have fixed that

Collapse
 
elshanx profile image
Yung

Well done, but don't you think there is another way of implementing scroll indicator without actually manipulating the DOM?

Collapse
 
enochndika profile image
Enoch Ndika

i don't think so but if you know another way without manipulating the dom, you can make a pull request

Collapse
 
devsr profile image
dev-SR

Please add Snackbar/Toast component.

Collapse
 
josetbn profile image
jose Batumeni

Amazing bro !