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

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

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

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

1. Install @allen-career-institute/material-tailwind-react.

npm i @allen-career-institute/material-tailwind-react

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

const withMT = require("@allen-career-institute/material-tailwind-react/utils/withMT");

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

3. @allen-career-institute/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 @allen-career-institute/material-tailwind-react.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

const root = ReactDOM.createRoot(document.getElementById("root"));
// Theme value has to be passed to the provider
// according to the usage of the component in the consuming application
root.render(
  <React.StrictMode>
    <ThemeProvider value={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
);

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

import { Button } from "@allen-career-institute/material-tailwind-react";

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

MIT