@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.

  • By Creative Tim
  • Last update: Jan 8, 2023
  • Comments: 15


version license GitHub issues open GitHub issues closed


Material Tailwind

@material-tailwind is an easy to use components library for Tailwind CSS and Material Design. It features multiple React components, all written with Tailwind CSS classes and Material Design guidelines. Coming soon components for VueJS, Angular and many more. Add this repository to your watch list to get the latest news, or join our newsletter community: https://material-tailwind.com/.

Table of Contents


Quick start


Using NPM
npm i -E @material-tailwind/react
Using Yarn
yarn add @material-tailwind/react -E
Import Material Tailwind Style Sheet

Import the tailwind.css into your app.js file. Make sure to import the tailwind.css style sheet after all other style sheets.

import "@material-tailwind/react/tailwind.css";
Link Material Icons Fonts to your project

Add a link for the material icons fonts inside the head of your project, so to use the material icons with material tailwind components. You can also use font awesome font family for the project just add a link for it inside the head of your project.

// Font Awesome Link ">
// Material Icons Link


// Font Awesome Link


Documentation - React

After you have installed @material-tailwind into your project, you can import and use our components like so:


Button ) }">
import React from "react";
import Button from "@material-tailwind/react/Button";

export default function Example() {
  return (

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Chrome Firefox Edge Safari Opera

Reporting Issues

We use GitHub Issues as the official bug tracker for the @material-tailwind. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the @material-tailwind.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.


Useful Links

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Instagram: https://www.instagram.com/creativetimofficial/




  • 1

    SyntaxError: Unexpected token 'export'

    Hello, I have used old version and it run well until new version come out. I follow instruction to install new version, however I get error:

    export * from "./components/Accordion";
    SyntaxError: Unexpected token 'export'
        at compileFunction (<anonymous>)
        at Object.compileFunction (node:vm:352:18)
        at wrapSafe (node:internal/modules/cjs/loader:1031:15)
        at Module._compile (node:internal/modules/cjs/loader:1065:27)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
        at Module.load (node:internal/modules/cjs/loader:981:32)
        at Function.Module._load (node:internal/modules/cjs/loader:822:12)
        at Module.require (node:internal/modules/cjs/loader:1005:19)
        at require (node:internal/modules/cjs/helpers:102:18)
        at [email protected]/react (...\.next\server\pages\_app.js:216:18)

    Here is my _app.js code:

    import '../styles/globals.css'
    import 'tailwindcss/tailwind.css'
    import '@material-tailwind/react'
    import React from 'react';
    import App from 'next/app';
    import MainLayout from '../components/mainlayout';
    class MyApp extends App {
      render() {
        const { Component, pageProps } = this.props;
        const Layout = Component.Layout || Component.DefaultLayout;
        return (
              <Component {...pageProps} />
    export default MyApp;

    this is tailwind.config.js

    const withMT = require("@material-tailwind/react/utils/withMT");
    module.exports = withMT({
      content: [
        { raw: '<div class="font-bold">', extension: 'html' },
      theme: {
        extend: {},
      plugins: [],
  • 2

    Typescript support

    Expected Behavior

    Should be able to use in TS project without any errors saying it Could not find a declaration file for module@material-tailwind/react/*`.

    Current Behavior

    I cannot use it in TS project as seen here: image

    Possible Solution

    Add native TS support or create typings.

    Steps to Reproduce (for bugs)

    1. Create empty NextJS/React app with TS support
    2. Install material-tailwind
    3. Import material component

    Your Environment

    Current version of material-tailwind. NextJS TS project.

  • 3

    Customize Button component to add a color


    I'm sorry but I don't really understand how can I add a color to the button's list color

    type color = | "blue-gray" | "gray" | "brown" | "deep-orange" | "orange" | "amber" | "yellow" | "lime" | "light-green" | "green" | "teal" | "cyan" | "light-blue" | "blue" | "indigo" | "deep-purple" | "purple" | "pink" | "red";

    I've created a "primary color" in my tailwind.config.js file ( primary: '#369BB0',)

    I now 'd like to add this color to the list of color of button component but don't know how.

    Thank you !

  • 4

    Icon button is not able to get the Icons

    I am working on Next JS and trying to add an Icon to my page. I started with an example given on the page

    import { Button, IconButton } from "@material-tailwind/react";
    import React from "react";
    const Header = () => {
      return (
          className="flex items-center sticky top-0 
        z-50 px-4 py-4 shadow-md bg-white"
            <i className="fas fa-heart"></i>
    export default Header;

    Do I need to add any dependencies or Am I missing any obvious reference? I added font awesome but it did not help.

  • 5

    FIX: Props interface was created but never used

    In that file props interface was created but was never used to type define the component props.

    My first pull request....still learning hope the thing i did was correct

  • 6

    Customization of Chip coponent


    I id like to customize the Chip component in order to use my own colors, etc. I use react and typescript. I receive an error due to my customization "TypeError: Cannot convert undefined or null to object"

    I, firstly, created a customChip component based on Chip component from Material-tailwind :

    interface CustomChipProps extends Omit<ChipProps, "color"> { variant?: "filled" | "gradient"; className?: string; value: string; color?: | "primary" | "secondary" | "warning" }

    export default function CustomChip(props: CustomChipProps) { return <Chip {...(props as any)} />; }

    then I create a baseChip component based on my CustomChip component :

    export const BaseChip: React.FC<React.PropsWithChildren<CustomChipProps>> = ( props: React.PropsWithChildren<CustomChipProps> ): JSX.Element => ( <CustomChip variant={props.variant} color={props.color} value={props.value} /> );

    on my theme file, i added the chip component, I think the problem is here, my I did an error but i don't know how to custom each part :

    chip: { defaultProps: { variant: 'filled', color: 'primary', show: true, size: 'sm', }, valid: { variants: ['filled'], colors: ['primary', 'secondary', 'warning', 'dark'], }, styles: { base: { position: "relative", }, variants: { filled: { primary: { background: 'bg-primary', color: 'text-white', }, secondary: { background: 'bg-secondary', color: 'text-dark', }, }, }, closeButtonColor: { filled: { primary: { color: 'text-white', }, secondary: { color: 'text-dark', }, warning: { color: 'text-white', }, }, }, },

    Thank you Kilian`

  • 7

    Checkbox and Inputs cannot be controlled

    I appologize in advance if I don't understand exactly how is supposed to be done or couldn't find the proper solution in the docs, feel free to close issue with an answer or a link, but I don't think the input and checkbox components have props to be controlled, the input doesnt have a value prop nor the checkbox has a checked prop.

    Any ways to control them? There is neither a prop to pass { ...props } to the inside component as they often are wrapped in a div or a label inside a div, how would we go about this?

  • 8

    Global CSS cannot be imported from within node_modules

    In trying to use the Popover component in a Nextjs codebase,

    import Popover from '@material-tailwind/react/Popover'
    <Popover placement='left' ref={targetRef}>

    I get the following error in Nextjs:

    wait  - compiling...
    error - ./node_modules/tippy.js/dist/svg-arrow.css
    Global CSS cannot be imported from within node_modules.
    Read more: https://nextjs.org/docs/messages/css-npm
    Location: node_modules/@material-tailwind/react/Popover.js

    Nextjs doesn't like it when a package is importing a CSS file from another module. See: https://nextjs.org/docs/messages/css-npm

  • 9

    NextJS build fails because of react-merge-refs

    > Build error occurred
    Error [ERR_REQUIRE_ESM]: require() of ES Module /home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/react-merge-refs/dist/index.mjs not supported.
    Instead change the require of /home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/react-merge-refs/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
        at Object.<anonymous> (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/@material-tailwind/react/components/Dialog/index.js:1:695)
        at Object.<anonymous> (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/@material-tailwind/react/index.js:1:504)
        at Object.4715 (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:207:18)
        at __webpack_require__ (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/webpack-runtime.js:25:[42](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:43))
        at /home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:18:82
        at Function.__webpack_require__.a (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/webpack-runtime.js:103:13)
        at Object.2491 (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:11:21)
        at __webpack_require__ (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/webpack-runtime.js:25:42)
        at __webpack_exec__ (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:378:39)
        at /home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:379:78
        at Function.__webpack_require__.X (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/webpack-runtime.js:190:21)
        at /home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:379:[47](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:48)
        at Object.<anonymous> (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:382:3)
        at Object.requirePage (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/server/require.js:[48](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:49):12)
        at Object.loadComponents (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/server/load-components.js:58:23)
        at /home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/build/utils.js:584:[52](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:53)
        at Span.traceAsyncFn (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/trace/trace.js:79:26)
        at Object.isPageStatic (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/build/utils.js:580:29)
        at execFunction (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2826)
        at execHelper (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2484)
        at execMethod (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2[57](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:58)2)
        at process.messageListener (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1282)
        at process.emit (node:events:527:28) {
      type: 'Error',
      code: 'ERR_REQUIRE_ESM'

    I don't even use Dialog component.

    Node version: 16.14.2


    "dependencies": {
        "@headlessui/react": "^1.6.4",
        "@heroicons/react": "^1.0.6",
        "@material-tailwind/react": "^1.1.0",
        "@next-auth/prisma-adapter": "^1.0.3",
        "@prisma/client": "^3.15.2",
        "@supabase/supabase-js": "^1.35.3",
        "classnames": "^2.3.1",
        "formik": "^2.2.9",
        "framer-motion": "^6.5.1",
        "next": "12.1.6",
        "next-auth": "^4.5.0",
        "next-pwa": "^5.5.4",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "yup": "^0.32.11"
  • 10

    Required attr. support for inputs


    One of the thing I always need is the required attribute for fields. In MUI, addind a "required" prop also appends an asterisk after the label.

    I struggled a bit to be able to append it myself as "required" is not a prop here and I couldn't pass element for the label. The "after" pseudo element is already taken for the focus animation, so the only workaround I found was to use the before element and play with TW classes such as :

    label='Téléphone portable'
       className: "required-input-field-label peer-placeholder-shown:text-base before:content-['*'] before:text-red-500 peer-placeholder-shown:before:left-[148px] before:absolute before:left-[102px] peer-focus:before:left-[102px]"
    className='text-base text-grey-800'
    .required-input-field-label {
        &:before {
          transition-property: left;
          transition-timing-function: ease-out;
          transition-duration: 150ms;

    As you can see, it's pretty ugly because the TW JIT dynamic values only match with the current label length. I think it would be nice to be able to either pass a custom element as label or to support the required attr. and auto add the usual asterisk element. Or just tell me if you have already figured out a way to solve this problem..

    Otherwise, happy to get rid of the original cumbersome MUI lib 👍

  • 11

    Breakpoints not working with Material Tailwind & Next.js

    Expected Behavior

    After starting a fresh project with the next.js tailwindCSS starter template and installing the material-tailwind package as per the docs, I created a heading which I expect to be aligned to the left from medium screens and up.

    The code used is as follows:

    <h1 className="text-center text-3xl md:text-left">Hello</h1>

    Current Behavior

    Instead I get the text centered at all screen sizes (breakpoints). This happens with multiple components within my fresh application.

    Possible Solution

    The only way I can get the application to work as intended is to remove the line importing the material tailwind CSS in the _app.js file and keep the tailwindcss/tailwind.css style import.

    My _app.js file is as follows:

    import Head from 'next/head';
    import 'tailwindcss/tailwind.css';
    // removing the below line makes the breakpoints work as intended
    import '@material-tailwind/react/tailwind.css';
    function MyApp({ Component, pageProps }) {
        return (
                <Component {...pageProps} />
    export default MyApp;

    Steps to Reproduce (for bugs)

    1. npx create-next-app -e with-tailwindcss my-project
    2. npm install -D [email protected] [email protected] [email protected]
    3. npx tailwindcss init -p
    4. npm i -E @material-tailwind/react
    5. Import the material CSS file so your _app.js looks like so:
    import Head from 'next/head';
    import 'tailwindcss/tailwind.css';
    import '@material-tailwind/react/tailwind.css';
    function MyApp({ Component, pageProps }) {
        return (
                <Component {...pageProps} />
    export default MyApp;
    1. In index.js create a component as follows:
    export default function Home() {
        return (
                    <h1 className="text-center text-3xl md:text-left">Hello</h1>
    1. Once you view it in your browser and resize, you can see that text does not realign.


    I was watching a live coding session on YT and I saw the programmer run into this problem and not resolve it so I just had a quick look.

    Your Environment

    • Version used: ^0.3.4
    • Browser Name and version: Chrome version 91.0.4472.114
    • Operating System and version (desktop or mobile): Mac
    • Link to your project:
  • 12

    How to use theming ficture to properly create a dark/light theme switcher

    Hello, currently the documentation is a bit too confusing(kinda empty) about how to use the theming ficture of the librarie, can someone explain what are the propertys i need to pass on the theme vaue object? thx.

  • 13

    Support for NextJS 13 and server components

    Will Material Tailwind get full support for nextJS 13 and Reacts server components? To utilise server components and MTW we would need to make every component as a client component.

  • 14

    idea: add section about testing with jest

    since material-tailwind components make use of the web animations API (which seems to be unsupported by jsdom) I think quite a few users might run into issues when testing interactions with components that use this component library.

    Maybe it would make sense to include a little section about how to set up get jest working with material-tailwind?

    E.g. by hinting to https://www.npmjs.com/package/jsdom-testing-mocks#mock-web-animations-api (no affiliation, but seems to work for me)

  • 15

    Feature Request: Date and Time pickers

    I like the ease of using this with Remix. So far, so good.

    Would like to request: DateField, TimeField (and combo of those). Also would love to see Calendar Picker (bonus: with Date Range)