Material Tailwind

## Documentation Visit 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.
1. Intall `@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( , ); ```
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 ; } ```

## 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)