Material Tailwind

<a href="https://www.material-tailwind.com">
    
    <h1 align="center">Material Tailwind</h1>
</a>


## @material-tailwind/react

### Documentation

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


### Components


| Accordion | Alert | Avatar |
| --- | --- | --- |
|  |  |  |
| Badge | Breadcrumbs | Button |
|  |  |  |
| Button Group | Card | Checkbox |
|  |  |  |
| Chip | Collapse | Carousel |
|  |  |  |
| Dialog | Drawer | Icon Button |
|  |  |  |
| Input | Form | List |
|  |  |  |
| Menu | Navbar | Popover |
|  |  |  |
| Progress Bar | Pagination | Radio Button |
|  |  |  |
| Rating Bar | Select | Slider |
|  |  |  |
| Speed Dial | Spinner | Stepper |
|  |  |  |
| Switch | Tabs | Text Area |
|  |  |  |
| Timeline | Tooltip | Typography |
|  |  |  |
| Footer | Image | Video |
|  |  |  |
| Sidebar | Table |  |
|  |  |  |


### 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.](https://tailwindcss.com/docs/installation/framework-guides?ref=material-tailwind)


1. Install `@material-tailwind/react`.

```bash
npm i @material-tailwind/react
```


2. Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the `withMT()` function coming from @material-tailwind/react/utils.

```js
const withMT = require("@material-tailwind/react/utils/withMT");

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


3. @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.

```jsx
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>
    
      <App />
    
  </React.StrictMode>,
);
```


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

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

export default function Example() {
  return Button;
}
```


## @material-tailwind/html

### Documentation

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


### Components


| Accordion | Alert | Avatar |
| --- | --- | --- |
|  |  |  |
| Breadcrumbs | Button | Card |
|  |  |  |
| Checkbox | Chip | Dialog |
|  |  |  |
| Icon Button | Input | Menu |
|  |  |  |
| Navbar | Pagination | Popover |
|  |  |  |
| Radio Button | Select | Progress Bar |
|  |  |  |
| Tabs | Textarea | Switch |
|  |  |  |
| 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.](https://tailwindcss.com/docs/installation?ref=material-tailwind)


1. Install `@material-tailwind/html`

```bash
npm i @material-tailwind/html
```


2. Once you install @material-tailwind/html you need to wrap your tailwind css configurations with the `withMT()` function coming from @material-tailwind/html/utils.

```js
const withMT = require("@material-tailwind/html/utils/withMT");

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


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

- [Discord](https://discord.com/invite/FhCJCaHdQa)

## 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](https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE)