Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/creativetimofficial/material-tailwind
@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://github.com/creativetimofficial/material-tailwind
javascript material material-design material-tailwind react reactjs tailwind tailwind-css tailwind-css-template tailwindcss tailwindcss-extension
Last synced: 5 days ago
JSON representation
@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
- Host: GitHub
- URL: https://github.com/creativetimofficial/material-tailwind
- Owner: creativetimofficial
- License: mit
- Created: 2021-02-01T13:14:43.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-18T14:46:07.000Z (24 days ago)
- Last Synced: 2024-12-20T00:34:23.477Z (23 days ago)
- Topics: javascript, material, material-design, material-tailwind, react, reactjs, tailwind, tailwind-css, tailwind-css-template, tailwindcss, tailwindcss-extension
- Language: TypeScript
- Homepage: https://material-tailwind.com/
- Size: 156 MB
- Stars: 3,934
- Watchers: 24
- Forks: 329
- Open Issues: 190
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-star-libs - creativetimofficial / material-tailwind - tailwind 是一个易于使用的组件库，适用于 Tailwind CSS 和 Material Design。 (目录)
- awesome-starred - creativetimofficial/material-tailwind - @material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design. (TypeScript)
- awesome-starred - creativetimofficial/material-tailwind - @material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design. (TypeScript)
README
## @material-tailwind/react
### 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. Install `@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 Button;
}
```
## @material-tailwind/html
### Documentation
Visit https://www.material-tailwind.com/docs/html/installation for full documentation.
### Components
Accordion
Alert
Avatar
Breadcrumbs
Button
Card
Checkbox
Chip
Dialog
Icon Button
Input
Menu
Navbar
Pagination
Popover
Radio Button
Select
Progress Bar
Tabs
Textarea
Switch
Typography
Tooltip
### 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 - Tailwind CSS Installation.
1. Install `@material-tailwind/html`
```bash
npm i @material-tailwind/html
```
2. 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: [],
});
```
4. 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!
- [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)
