DEV Community

Cover image for Free Tailwind Css UI Kit with Material Design 3
Ari Budin
Ari Budin

Posted on

Free Tailwind Css UI Kit with Material Design 3

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.

Tailwind css Ui kit

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)