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.

Tailwind CSS Components

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

JavaScript Components

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

Documentation

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

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.

Default

Gradient

Link

Icon

import { Button } from "@material-tailwind/react";
                  
null

import { Button } from "@material-tailwind/react";
                  
null


<span class="w-8 h-8 bg-blue-50">
<span class="w-8 h-8 bg-blue-100">
<span class="w-8 h-8 bg-blue-200">
<span class="w-8 h-8 bg-blue-300">
<span class="w-8 h-8 bg-blue-400">
<span class="w-8 h-8 bg-blue-500">
<span class="w-8 h-8 bg-blue-600">
<span class="w-8 h-8 bg-blue-700">
<span class="w-8 h-8 bg-blue-800">
<span class="w-8 h-8 bg-blue-900">


<span class="w-8 h-8 bg-blue-50">
<span class="w-8 h-8 bg-blue-100">
<span class="w-8 h-8 bg-blue-200">
<span class="w-8 h-8 bg-blue-300">
<span class="w-8 h-8 bg-blue-400">
<span class="w-8 h-8 bg-blue-500">
<span class="w-8 h-8 bg-blue-600">
<span class="w-8 h-8 bg-blue-700">
<span class="w-8 h-8 bg-blue-800">
<span class="w-8 h-8 bg-blue-900">

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.



<span class="w-32 h-34 shadow">
<span class="w-32 h-34 shadow-inner">
<span class="w-32 h-34 shadow-sm">
<span class="w-32 h-34 shadow-md">
<span class="w-32 h-34 shadow-lg">
<span class="w-32 h-34 shadow-xl">
<span class="w-32 h-34 shadow-2xl">
<span class="w-32 h-34 shadow-none">



<span class="w-32 h-34 shadow">
<span class="w-32 h-34 shadow-inner">
<span class="w-32 h-34 shadow-sm">
<span class="w-32 h-34 shadow-md">
<span class="w-32 h-34 shadow-lg">
<span class="w-32 h-34 shadow-xl">
<span class="w-32 h-34 shadow-2xl">
<span class="w-32 h-34 shadow-none">

import {
  Card,
  CardHeader,
  CardBody,
  Typography,
} from "@material-tailwind/react";

<Card className="shadow-lg">
  <CardHeader
    variant="gradient"
    color="gray"
    className="h-48"
  >
    <img
      src="/img/blog-2.jpg"
      alt="tailwind-img-blur-shadow"
      className="w-full h-full"
    />
  </CardHeader>
  <CardBody className="text-center">
    <Typography
      as="a"
      variant="h5"
      className="text-[#1A237E] font-normal mb-2"
    >
      Great for your awesome project
    </Typography>
    <Typography>
      Putting together a page has never been easier than
      matching together pre-made components. From landing
      pages presentation to login areas, you can easily
      customise and built your pages.
    </Typography>
  </CardBody>
</Card>

import {
  Card,
  CardHeader,
  CardBody,
  Typography,
} from "@material-tailwind/react";

<Card className="shadow-lg">
  <CardHeader
    variant="gradient"
    color="gray"
    className="h-48"
  >
    <img
      src="/img/blog-2.jpg"
      alt="tailwind-img-blur-shadow"
      className="w-full h-full"
    />
  </CardHeader>
  <CardBody className="text-center">
    <Typography
      as="a"
      variant="h5"
      className="text-[#1A237E] font-normal mb-2"
    >
      Great for your awesome project
    </Typography>
    <Typography>
      Putting together a page has never been easier than
      matching together pre-made components. From landing
      pages presentation to login areas, you can easily
      customise and built your pages.
    </Typography>
  </CardBody>
</Card>

Great for your awesome project

Putting together a page has never been easier than matching together pre-made components. From landing pages presentation to login areas, you can easily customise and built your pages.

Putting together a page has never been easier than matching together pre-made components.

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

null

null

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!."

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