creativetimofficial/material-tailwind — Gitpedia

<a href="https://www.material-tailwind.com"> <img width="100%" src="./public/image/material-tailwind-readme.jpg" alt="material-tailwind" style="border-radius: 24px" /> <h1 align="center">Material Tailwind</h1> </a> <a href="https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE"> <img src="https://img.shields.io/npm/l/@material-tailwind/react?label=%40material-taiwlind%2Freact" alt="License" /> </a> <a href="https://www.npmjs.com/package/@material-tailwind/react"> <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads"> </a> <a href="https://github.com/creativetimofficial/material-tailwind/releases"> <img src="https://img.shields.io/badge/version-2.1.10-blue.svg" alt="Version" /> </a> <a href="https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE"> <img src="https://img.shields.io/npm/l/@material-tailwind/html?label=%40material-taiwlind%2Fhtml" alt="License" /> </a> <a href="https://www.npmjs.com/package/@material-tailwind/html"> <img src="https://img.shields.io/npm/dt/@material-tailwind/html.svg" alt="Total Downloads"> </a> <a href="https://github.com/creativetimofficial/material-tailwind/releases"> <img src="https://img.shields.io/badge/version-2.2.3-blue.svg" alt="Version" /> </a> <a href="https://vercel.com/?utm_source=ct-tailwind-team&utm_campaign=oss" target="_blank" rel="noopener noreferrer"> <img width="30%" src="./public/img/vercel-logo.png" alt="Vercel" /> </a>

@material-tailwind/react

Documentation

Visit <a href="https://www.material-tailwind.com/docs/react/installation">https://www.material-tailwind.com/docs/react/installation</a> for full documentation.

Components

<table> <tr> <td width="33.3333%">Accordion</td> <td width="33.3333%">Alert</td> <td width="33.3333%">Avatar</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/accordion"> <img alt="accordion" src="./public/image/components/accordion-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/alert"> <img alt="alert" src="./public/image/components/alert-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/avatar"> <img alt="avatar" src="./public/image/components/avatar-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Badge</td> <td width="33.3333%">Breadcrumbs</td> <td width="33.3333%">Button</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/badge"> <img alt="badge" src="./public/image/components/badge-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/breadcrumbs"> <img alt="breadcrumbs" src="./public/image/components/breadcrumbs-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/button"> <img alt="button" src="./public/image/components/button-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Button Group</td> <td width="33.3333%">Card</td> <td width="33.3333%">Checkbox</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/button-group"> <img alt="button-group" src="./public/image/components/buttongroup-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/card"> <img alt="card" src="./public/image/components/card-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/checkbox"> <img alt="checkbox" src="./public/image/components/checkbox-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Chip</td> <td width="33.3333%">Collapse</td> <td width="33.3333%">Carousel</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/chip"> <img alt="chip" src="./public/image/components/chip-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/collapse"> <img alt="collapse" src="./public/image/components/collapse-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/carousel"> <img alt="carousel" src="./public/image/components/carousel-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Dialog</td> <td width="33.3333%">Drawer</td> <td width="33.3333%">Icon Button</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/dialog"> <img alt="dialog" src="./public/image/components/dialog-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/drawer"> <img alt="drawer" src="./public/image/components/drawer-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/icon-button"> <img alt="icon-button" src="./public/image/components/icon-button-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Input</td> <td width="33.3333%">Form</td> <td width="33.3333%">List</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/input"> <img alt="input" src="./public/image/components/input-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/form"> <img alt="form" src="./public/image/components/form-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/list"> <img alt="list" src="./public/image/components/list-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Menu</td> <td width="33.3333%">Navbar</td> <td width="33.3333%">Popover</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/menu"> <img alt="menu" src="./public/image/components/menu-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/navbar"> <img alt="navbar" src="./public/image/components/navbar-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/popover"> <img alt="popover" src="./public/image/components/popover-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Progress Bar</td> <td width="33.3333%">Pagination</td> <td width="33.3333%">Radio Button</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/progress-bar"> <img alt="progress-bar" src="./public/image/components/progress-bar-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/pagination"> <img alt="pagination" src="./public/image/components/pagination-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/radio-button"> <img alt="radio-button" src="./public/image/components/radio-button-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Rating Bar</td> <td width="33.3333%">Select</td> <td width="33.3333%">Slider</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/rating-bar"> <img alt="rating-bar" src="./public/image/components/ratingbar-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/select"> <img alt="select" src="./public/image/components/select-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/slider"> <img alt="slider" src="./public/image/components/slider-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Speed Dial</td> <td width="33.3333%">Spinner</td> <td width="33.3333%">Stepper</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/speed-dial"> <img alt="speed-dial" src="./public/image/components/speeddial-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/spinner"> <img alt="spinner" src="./public/image/components/spinner-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/stepper"> <img alt="stepper" src="./public/image/components/stepper-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Switch</td> <td width="33.3333%">Tabs</td> <td width="33.3333%">Text Area</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/switch"> <img alt="switch" src="./public/image/components/switch-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/tabs"> <img alt="tabs" src="./public/image/components/tabs-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/textarea"> <img alt="textarea" src="./public/image/components/text-area-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Timeline</td> <td width="33.3333%">Tooltip</td> <td width="33.3333%">Typography</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/timeline"> <img alt="timeline" src="./public/image/components/timeline-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/tooltip"> <img alt="tooltip" src="./public/image/components/tooltip-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/typography"> <img alt="typography" src="./public/image/components/typography-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Footer</td> <td width="33.3333%">Image</td> <td width="33.3333%">Video</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/footer"> <img alt="footer" src="./public/image/components/footer-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/img"> <img alt="img" src="./public/image/components/img-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/video"> <img alt="video" src="./public/image/components/video-thumbnail.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Sidebar</td> <td width="33.3333%">Table</td> </tr> <tr> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/sidebar"> <img alt="sidebar" src="./public/image/components/sidebar-thumbnail.jpg"> </a> </td> <td width="33.3333%" style="padding: 0;"> <a href="https://www.material-tailwind.com/docs/react/table"> <img alt="table" src="./public/image/components/table-thumbnail.jpg"> </a> </td> </tr> </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 - <a href="https://tailwindcss.com/docs/installation/framework-guides?ref=material-tailwind" target="_blank">Tailwind CSS Installation.</a>

Install @material-tailwind/react.

bash
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.

js
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.

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

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

@material-tailwind/html

Documentation

Visit <a href="https://www.material-tailwind.com/docs/html/installation">https://www.material-tailwind.com/docs/html/installation</a> for full documentation.

Components

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 - <a href="https://tailwindcss.com/docs/installation?ref=material-tailwind" target="_blank">Tailwind CSS Installation.</a>

Install @material-tailwind/html

bash
npm i @material-tailwind/html

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

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!