Package Exports

@material-tailwind/react
@material-tailwind/react/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material-tailwind/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Material Tailwind

Documentation

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

Components

Accordion	Alert	Avatar

Breadcrumbs	Button	Card

Checkbox	Chip	Dialog

Icon Button	Input	Menu

Navbar	Popover	Progress Bar

Radio Button	Select	Switch

Tabs	Textarea	Tooltip

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.

Intall @material-tailwind/react.

npm i @material-tailwind/react

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: [],
});

@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>,
);

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>;
}

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

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