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

Enoch Ndika @enochndika

About: Web Developer | Udemy Instructor | Creator of Salvia-kit & Kimia-ui

Joined:
Jul 6, 2020

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

Publish Date: Mar 10 '21
313 36

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.

Kimia-UI

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.

Kimia-UI

Source Code

Components

Comments 36 total

  • Luis Pinheiro
    Luis PinheiroMar 11, 2021

    Great job

  • Pranav Birajdar
    Pranav BirajdarMar 11, 2021

    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!

  • Seanmclem
    SeanmclemMar 11, 2021

    Is the drop down accessible?

  • Yung
    YungMar 11, 2021

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

    • Enoch Ndika
      Enoch NdikaMar 11, 2021

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

  • Tanner Cottle
    Tanner CottleMar 11, 2021

    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.

  • Aus G
    Aus GMar 11, 2021

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

  • Asjark
    AsjarkMar 11, 2021

    Pretty awesome.

  • Maxime Kubik
    Maxime KubikMar 11, 2021

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

  • Bryan Lee
    Bryan LeeMar 11, 2021

    What's the difference between this and Chakra UI?

    • Enoch Ndika
      Enoch NdikaMar 11, 2021

      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.

  • Abdullah Al Hommada
    Abdullah Al HommadaMar 11, 2021

    Nice Job!

  • joezak-outta
    joezak-outtaMar 11, 2021

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

  • @lukeocodes 🕹👨‍💻
    @lukeocodes 🕹👨‍💻Mar 12, 2021

    Love this!

    (Could have called it Rewind 😂)

    • Enoch Ndika
      Enoch NdikaMar 12, 2021

      😃😃 i chose that name for SEO purpose

  • Efosa Jeffrey
    Efosa JeffreyMar 12, 2021

    This is super awesome!

  • Rich Winter
    Rich WinterMar 12, 2021

    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.

    • Enoch Ndika
      Enoch NdikaMar 12, 2021

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

  • spiritupbro
    spiritupbroMar 12, 2021

    wow cool

  • Graziano Statello
    Graziano StatelloMar 12, 2021

    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?

    • Enoch Ndika
      Enoch NdikaMar 12, 2021

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

      • Graziano Statello
        Graziano StatelloMar 13, 2021

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

        • Enoch Ndika
          Enoch NdikaMar 13, 2021

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

  • Shubham Mishra
    Shubham MishraMar 12, 2021

    It's amazing +respect

  • Alonso Aguayo
    Alonso AguayoMar 13, 2021

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

  • jimmycliff obonyo
    jimmycliff obonyoMay 18, 2021

    Good job , nice !

  • dev-SR
    dev-SRSep 5, 2021

    Please add Snackbar/Toast component.

  • jose Batumeni
    jose BatumeniApr 7, 2022

    Amazing bro !

Add comment