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

material-tailwind

Material Tailwind


License Total Downloads Version

License Total Downloads Version

Vercel



@material-tailwind/react

Documentation

Visit https://www.material-tailwind.com/docs/react/installation for full documentation.


Components

Accordion Alert Avatar
accordion alert avatar
Breadcrumbs Button Card
breadcrumbs button card
Checkbox Chip Dialog
checkbox chip dialog
Icon Button Input Menu
icon-button input menu
Navbar Popover Progress Bar
navbar popover progress-bar
Radio Button Select Switch
radio-button select switch
Tabs Textarea Tooltip
tabs textarea tooltip
Typography
typography

Getting Started

Learn how to use @material-tailwind/react components to quickly and easily create elegant and flexible pages using Tailwind CSS.

@material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.


  1. Intall @material-tailwind/react.
npm i @material-tailwind/react

  1. Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/react/utils.
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

  1. @material-tailwind/react comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. You need to wrap your entire application with the ThemeProvider coming from @material-tailwind/react.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

  1. Congratulations 🥳, you did it, now you're ready to use @material-tailwind/react.
import { Button } from "@material-tailwind/react";

export default function Example() {
  return <Button>Button</Button>;
}

@material-tailwind/html

Documentation

Visit https://www.material-tailwind.com/docs/html/installation for full documentation.


Components

Accordion Alert Avatar
accordion alert avatar
Breadcrumbs Button Card
breadcrumbs button card
Checkbox Chip Dialog
checkbox chip dialog
Icon Button Input Menu
icon-button input menu
Navbar Pagination Popover
navbar pagination popover
Progress Bar Radio Button Select
radio-button select progress-bar
Switch Tabs Textarea
tabs textarea switch
Tooltip Typography
typography tooltip

Getting Started

Learn how to use @material-tailwind/html components to quickly and easily create elegant and flexible pages using Tailwind CSS.

@material-tailwind/html is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.


  1. Intall @material-tailwind/html
npm i @material-tailwind/html

  1. Once you install @material-tailwind/html you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/html/utils.
const withMT = require("@material-tailwind/html/utils/withMT");

module.exports = withMT({
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
});

  1. Congratulations 🥳, you did it, now you're ready to use @material-tailwind/html.


Community

We're excited to see the community adopt Material Tailwind, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Please adhere to this project's CODE_OF_CONDUCT.md.

License

MIT

Contributors

sajadevo
groovemen
oren1991
max-programming
Yarles404
egyjs
Deveesh-Shetty
mldyh
victorpatru
sshodges