Material Tailwind

Material Tailwind is an easy to use components library for Tailwind CSS and Material Design.

npm i @material-tailwind/react

Tailwind CSS-Based Framework

Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.

dashboard
Tailwind CSS Components

Material Tailwind comes with a huge number of Fully Coded Tailwind CSS components.

terminal
JavaScript Components

Material Tailwind only features React and HTML components, but in the near future it will future more.

description
Documentation

This extension comes a lot of fully coded examples that help you get started faster.

view_carousel
Templates (soon)

Material Tailwind will come with fully coded sample pages so you could start working instantly.

Change your
Button's design.

Material Tailwind provides a simple way to customize your button; you can change the colors, fonts, styling, and everything you need.

radio_button_checked

Default

gradient

Gradient

format_color_text

Link

favorite

Icon

tailwind_blob_blue
tailwind_blob_purpletailwind_colors_pallet

Awesome
Color palette.

Create a color theme that perfectly matches your style and brand, inspired by Material Design. Get color inspiration for your designs with Material Tailwind!

Realistic
Shadows included.

Create a cohesive and modern-looking design for your website with our collection of realistic shadows. They will help your elements to pop-up.

tailwind_blob_bluetailwind_shadows
tailwind_blob_purple
react only

Various styles of
Components.

Putting together a page has never been easier than matching our pre-made components. Add our ready-styled components to your project or modify them as you would like.

Accordion
Breadcrumbs
Card
Dropdown
Navbar
Popover
Select
Tabs
Tooltip

With your favorite
Framework.

Material Tailwind components can be used with different popular frameworks like React and HTML. Angular and Vue.js versions are coming soon!

React

HTML

soon

Angular

soon

Vue.js

tailwind_blob_blue

Trusted by over
1,855,822+ web developers

Many Fortune 500 companies, startups, universities and governmental institutions love Creative Tim's products.

Nick Willever

1 day ago

"This is an excellent product, the documentation is excellent and helped me get things done more efficiently."

Shailesh Kushwaha

1 week ago

"I found solution to all my design needs from Creative Tim. I use them as a freelancer in my hobby projects for fun! And its really affordable, very humble guys !!!"

Samuel Kamuli

3 weeks ago

"Great product. Helped me cut the time to set up a site. I used the components within instead of starting from scratch. I highly recommend for developers who want to spend more time on the backend!."

tailwind_logo_amazon
tailwind_logo_ibm
tailwind_logo_microsoft
tailwind_logo_cisco
tailwind_logo_vodafone

Join our comumunity

Since Tailwind CSS is an open source project, we want to continue this movement too.

Github

Contribute to our project and help our community!

Discord

Join our Discord community and let’s get to know each other.

Twitter

Follow us on Twitter and keep up-to-date with our latest news.

bubbles