If you're looking for a UI kit for a Tailwind css project, Tailmater might be the perfect fit for you. Tailmater is an open source UI Kit based on Tailwind css framework. Built with Material Design 3 the latest version of Google's open-source design system.
What's in the Tailmater UI kit?
Many components are ready for you to use to build a Tailwind css web project. The following are the components available in Tailmater.
- Action component contains various buttons such as the general button, floating action buttons (FAB), extended Fabs, icon buttons and segmented buttons.
- Communication component contains badges, progress indicators, and snackbar.
- Containment component contains cards, divider, lists, bottom sheets, dialogs, side sheets, and full screen dialogue.
- Navigation component contains the bottom app bar, navigation ba, bar, avigation drawer, navigation rails, search, top app bar and tabs
- Selection component contains a check box, radio, chip, switch, slider range and menu (dropdown)
- Text input component contains input text with the filled and outline.
In this project I have also completed it with a simple Vanilla Javascript so it is ready to use.
Demo component in here https://aribudin.github.io/tailmater/
You can find a tailmater project at https://github.com/aribudin/tailmater
How to start?
To start using tailmater is quite easy
- Clone the repository with the following command:
git clone https://github.com/aribudin/tailmater.git- Run in terminal this command:
npx tailwindcss -i ./src/tailwindcss/tailwind.css -o ./src/css/style.css --watch- Open html file in browser and start editing
Tailmater use the MIT license so you can use it included in a commercial project. Credit to the Github page will always be appreciated.
Closing
If you like the “TailMater” project, please give a star on our github page. We always accept contributions and proposals. You can also follow my Twitter https://twitter.com/ari_budin to get the latest updates.
Top comments (0)