@material-tailwind/react
TypeScript icon, indicating that this package has built-in type declarations

2.1.9 • Public • Published
material-tailwind

Material Tailwind

Total Downloads Version Licenese



Documentation

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


Components

Accordion Alert Avatar
accordion alert avatar
Badge Breadcrumbs Button
badge breadcrumbs button
Button Group Card Checkbox
button-group card checkbox
Chip Collapse Carousel
chip collapse carousel
Dialog Drawer Icon Button
dialog drawer icon-button
Input Form List
input form list
Menu Navbar Popover
menu navbar popover
Progress Bar Pagination Radio Button
progress-bar pagination radio-button
Rating Bar Select Slider
rating-bar select slider
Speed Dial Spinner Stepper
speed-dial spinner stepper
Switch Tabs Text Area
switch tabs textarea
Timeline Tooltip Typography
timeline tooltip typography
Footer Image Video
footer img video
Sidebar Table
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.
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>;
}


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

Versions

Current Tags

Version History

Package Sidebar

Install

npm i @material-tailwind/react

Weekly Downloads

45,038

Version

2.1.9

License

MIT

Unpacked Size

1.26 MB

Total Files

709

Last publish

Collaborators

  • material-tailwind-profile
  • sajadevo