{"id":13406262,"url":"https://github.com/creativetimofficial/material-tailwind","last_synced_at":"2025-05-14T11:08:18.047Z","repository":{"id":37315946,"uuid":"334954985","full_name":"creativetimofficial/material-tailwind","owner":"creativetimofficial","description":"@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.","archived":false,"fork":false,"pushed_at":"2025-02-17T15:23:30.000Z","size":165044,"stargazers_count":4159,"open_issues_count":205,"forks_count":341,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-05-07T10:52:37.202Z","etag":null,"topics":["javascript","material","material-design","material-tailwind","react","reactjs","tailwind","tailwind-css","tailwind-css-template","tailwindcss","tailwindcss-extension"],"latest_commit_sha":null,"homepage":"https://material-tailwind.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/creativetimofficial.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"material-tailwind"}},"created_at":"2021-02-01T13:14:43.000Z","updated_at":"2025-05-07T09:51:05.000Z","dependencies_parsed_at":"2024-01-05T09:43:19.023Z","dependency_job_id":"078055e0-6302-4740-a730-a7120a886b65","html_url":"https://github.com/creativetimofficial/material-tailwind","commit_stats":{"total_commits":2704,"total_committers":54,"mean_commits":"50.074074074074076","dds":0.514792899408284,"last_synced_commit":"8718792132a70863511d61f3e686e1eda63c357e"},"previous_names":[],"tags_count":92,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativetimofficial%2Fmaterial-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativetimofficial%2Fmaterial-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativetimofficial%2Fmaterial-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativetimofficial%2Fmaterial-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creativetimofficial","download_url":"https://codeload.github.com/creativetimofficial/material-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129481,"owners_count":22019628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","material","material-design","material-tailwind","react","reactjs","tailwind","tailwind-css","tailwind-css-template","tailwindcss","tailwindcss-extension"],"created_at":"2024-07-30T19:02:25.613Z","updated_at":"2025-05-14T11:08:18.020Z","avatar_url":"https://github.com/creativetimofficial.png","language":"TypeScript","readme":"\u003ca href=\"https://www.material-tailwind.com\"\u003e\n    \u003cimg width=\"100%\" src=\"./public/image/material-tailwind-readme.jpg\" alt=\"material-tailwind\" style=\"border-radius: 24px\" /\u003e\n    \u003ch1 align=\"center\"\u003eMaterial Tailwind\u003c/h1\u003e\n\u003c/a\u003e\n\u003c/br\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/@material-tailwind/react?label=%40material-taiwlind%2Freact\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@material-tailwind/react\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/@material-tailwind/react.svg\" alt=\"Total Downloads\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/creativetimofficial/material-tailwind/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/version-2.1.10-blue.svg\" alt=\"Version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/@material-tailwind/html?label=%40material-taiwlind%2Fhtml\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@material-tailwind/html\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/@material-tailwind/html.svg\" alt=\"Total Downloads\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/creativetimofficial/material-tailwind/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/version-2.2.3-blue.svg\" alt=\"Version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vercel.com/?utm_source=ct-tailwind-team\u0026utm_campaign=oss\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n     \u003cimg width=\"30%\" src=\"./public/img/vercel-logo.png\" alt=\"Vercel\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## @material-tailwind/react\n\n### Documentation\n\nVisit \u003ca href=\"https://www.material-tailwind.com/docs/react/installation\"\u003ehttps://www.material-tailwind.com/docs/react/installation\u003c/a\u003e for full documentation.\n\n\u003cbr /\u003e\n\n### Components\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eAccordion\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eAlert\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eAvatar\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/accordion\"\u003e\n        \u003cimg alt=\"accordion\" src=\"./public/image/components/accordion-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/alert\"\u003e\n        \u003cimg alt=\"alert\" src=\"./public/image/components/alert-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/avatar\"\u003e\n        \u003cimg alt=\"avatar\" src=\"./public/image/components/avatar-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eBadge\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eBreadcrumbs\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eButton\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/badge\"\u003e\n        \u003cimg alt=\"badge\" src=\"./public/image/components/badge-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/breadcrumbs\"\u003e\n        \u003cimg alt=\"breadcrumbs\" src=\"./public/image/components/breadcrumbs-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/button\"\u003e\n        \u003cimg alt=\"button\" src=\"./public/image/components/button-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eButton Group\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eCard\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eCheckbox\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/button-group\"\u003e\n        \u003cimg alt=\"button-group\" src=\"./public/image/components/buttongroup-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/card\"\u003e\n        \u003cimg alt=\"card\" src=\"./public/image/components/card-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/checkbox\"\u003e\n        \u003cimg alt=\"checkbox\" src=\"./public/image/components/checkbox-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eChip\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eCollapse\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eCarousel\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/chip\"\u003e\n        \u003cimg alt=\"chip\" src=\"./public/image/components/chip-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/collapse\"\u003e\n        \u003cimg alt=\"collapse\" src=\"./public/image/components/collapse-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/carousel\"\u003e\n        \u003cimg alt=\"carousel\" src=\"./public/image/components/carousel-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eDialog\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eDrawer\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eIcon Button\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/dialog\"\u003e\n        \u003cimg alt=\"dialog\" src=\"./public/image/components/dialog-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/drawer\"\u003e\n        \u003cimg alt=\"drawer\" src=\"./public/image/components/drawer-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/icon-button\"\u003e\n        \u003cimg alt=\"icon-button\" src=\"./public/image/components/icon-button-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eInput\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eForm\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eList\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/input\"\u003e\n        \u003cimg alt=\"input\" src=\"./public/image/components/input-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/form\"\u003e\n        \u003cimg alt=\"form\" src=\"./public/image/components/form-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/list\"\u003e\n        \u003cimg alt=\"list\" src=\"./public/image/components/list-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eMenu\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eNavbar\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003ePopover\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/menu\"\u003e\n        \u003cimg alt=\"menu\" src=\"./public/image/components/menu-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/navbar\"\u003e\n        \u003cimg alt=\"navbar\" src=\"./public/image/components/navbar-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/popover\"\u003e\n        \u003cimg alt=\"popover\" src=\"./public/image/components/popover-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eProgress Bar\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003ePagination\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eRadio Button\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/progress-bar\"\u003e\n        \u003cimg alt=\"progress-bar\" src=\"./public/image/components/progress-bar-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/pagination\"\u003e\n        \u003cimg alt=\"pagination\" src=\"./public/image/components/pagination-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/radio-button\"\u003e\n        \u003cimg alt=\"radio-button\" src=\"./public/image/components/radio-button-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eRating Bar\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSelect\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSlider\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/rating-bar\"\u003e\n        \u003cimg alt=\"rating-bar\" src=\"./public/image/components/ratingbar-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/select\"\u003e\n        \u003cimg alt=\"select\" src=\"./public/image/components/select-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/slider\"\u003e\n        \u003cimg alt=\"slider\" src=\"./public/image/components/slider-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eSpeed Dial\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSpinner\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eStepper\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/speed-dial\"\u003e\n        \u003cimg alt=\"speed-dial\" src=\"./public/image/components/speeddial-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/spinner\"\u003e\n        \u003cimg alt=\"spinner\" src=\"./public/image/components/spinner-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/stepper\"\u003e\n        \u003cimg alt=\"stepper\" src=\"./public/image/components/stepper-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eSwitch\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTabs\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eText Area\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/switch\"\u003e\n        \u003cimg alt=\"switch\" src=\"./public/image/components/switch-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/tabs\"\u003e\n        \u003cimg alt=\"tabs\" src=\"./public/image/components/tabs-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/textarea\"\u003e\n        \u003cimg alt=\"textarea\" src=\"./public/image/components/text-area-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eTimeline\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTooltip\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTypography\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/timeline\"\u003e\n        \u003cimg alt=\"timeline\" src=\"./public/image/components/timeline-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/tooltip\"\u003e\n        \u003cimg alt=\"tooltip\" src=\"./public/image/components/tooltip-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/typography\"\u003e\n        \u003cimg alt=\"typography\" src=\"./public/image/components/typography-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eFooter\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eImage\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eVideo\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/footer\"\u003e\n        \u003cimg alt=\"footer\" src=\"./public/image/components/footer-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/img\"\u003e\n        \u003cimg alt=\"img\" src=\"./public/image/components/img-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/video\"\u003e\n        \u003cimg alt=\"video\" src=\"./public/image/components/video-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eSidebar\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTable\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/sidebar\"\u003e\n        \u003cimg alt=\"sidebar\" src=\"./public/image/components/sidebar-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/react/table\"\u003e\n        \u003cimg alt=\"table\" src=\"./public/image/components/table-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr /\u003e\n\n### Getting Started\n\nLearn how to use @material-tailwind/react components to quickly and easily create elegant and flexible pages using Tailwind CSS.\n\n@material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - \u003ca href=\"https://tailwindcss.com/docs/installation/framework-guides?ref=material-tailwind\" target=\"_blank\"\u003eTailwind CSS Installation.\u003c/a\u003e\n\n\u003cbr /\u003e\n\n1. Install `@material-tailwind/react`.\n\n```bash\nnpm i @material-tailwind/react\n```\n\n\u003cbr /\u003e\n\n2. Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the `withMT()` function coming from @material-tailwind/react/utils.\n\n```js\nconst withMT = require(\"@material-tailwind/react/utils/withMT\");\n\nmodule.exports = withMT({\n  content: [\"./src/**/*.{js,jsx,ts,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n});\n```\n\n\u003cbr /\u003e\n\n3. @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.\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\n\n// @material-tailwind/react\nimport { ThemeProvider } from \"@material-tailwind/react\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\n\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cThemeProvider\u003e\n      \u003cApp /\u003e\n    \u003c/ThemeProvider\u003e\n  \u003c/React.StrictMode\u003e,\n);\n```\n\n\u003cbr /\u003e\n\n4. Congratulations 🥳, you did it, now you're ready to use @material-tailwind/react.\n\n```jsx\nimport { Button } from \"@material-tailwind/react\";\n\nexport default function Example() {\n  return \u003cButton\u003eButton\u003c/Button\u003e;\n}\n```\n\n\u003cbr /\u003e\n\n## @material-tailwind/html\n\n### Documentation\n\nVisit \u003ca href=\"https://www.material-tailwind.com/docs/html/installation\"\u003ehttps://www.material-tailwind.com/docs/html/installation\u003c/a\u003e for full documentation.\n\n\u003cbr /\u003e\n\n### Components\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eAccordion\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eAlert\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eAvatar\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/accordion\"\u003e\n        \u003cimg alt=\"accordion\" src=\"./public/image/components/accordion-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/alert\"\u003e\n        \u003cimg alt=\"alert\" src=\"./public/image/components/alert-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/avatar\"\u003e\n        \u003cimg alt=\"avatar\" src=\"./public/image/components/avatar-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eBreadcrumbs\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eButton\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eCard\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/breadcrumbs\"\u003e\n        \u003cimg alt=\"breadcrumbs\" src=\"./public/image/components/breadcrumbs-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/button\"\u003e\n        \u003cimg alt=\"button\" src=\"./public/image/components/button-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/card\"\u003e\n        \u003cimg alt=\"card\" src=\"./public/image/components/card-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eCheckbox\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eChip\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eDialog\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/checkbox\"\u003e\n        \u003cimg alt=\"checkbox\" src=\"./public/image/components/checkbox-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/chip\"\u003e\n        \u003cimg alt=\"chip\" src=\"./public/image/components/chip-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/dialog\"\u003e\n        \u003cimg alt=\"dialog\" src=\"./public/image/components/dialog-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eIcon Button\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eInput\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eMenu\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/icon-button\"\u003e\n        \u003cimg alt=\"icon-button\" src=\"./public/image/components/icon-button-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/input\"\u003e\n        \u003cimg alt=\"input\" src=\"./public/image/components/input-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/menu\"\u003e\n        \u003cimg alt=\"menu\" src=\"./public/image/components/menu-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eNavbar\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003ePagination\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003ePopover\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/navbar\"\u003e\n        \u003cimg alt=\"navbar\" src=\"./public/image/components/navbar-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/pagination\"\u003e\n        \u003cimg alt=\"pagination\" src=\"./public/image/components/pagination-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/popover\"\u003e\n        \u003cimg alt=\"popover\" src=\"./public/image/components/popover-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eRadio Button\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSelect\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eProgress Bar\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/radio-button\"\u003e\n        \u003cimg alt=\"radio-button\" src=\"./public/image/components/radio-button-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/select\"\u003e\n        \u003cimg alt=\"select\" src=\"./public/image/components/select-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/progress-bar\"\u003e\n        \u003cimg alt=\"progress-bar\" src=\"./public/image/components/progress-bar-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eTabs\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTextarea\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSwitch\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/tabs\"\u003e\n        \u003cimg alt=\"tabs\" src=\"./public/image/components/tabs-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/textarea\"\u003e\n        \u003cimg alt=\"textarea\" src=\"./public/image/components/text-area-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/switch\"\u003e\n        \u003cimg alt=\"switch\" src=\"./public/image/components/switch-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd width=\"33.3333%\"\u003eTypography\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTooltip\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/typography\"\u003e\n        \u003cimg alt=\"typography\" src=\"./public/image/components/typography-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\" style=\"padding: 0;\"\u003e\n      \u003ca href=\"https://www.material-tailwind.com/docs/html/tooltip\"\u003e\n        \u003cimg alt=\"tooltip\" src=\"./public/image/components/tooltip-thumbnail.jpg\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr /\u003e\n\n### Getting Started\n\nLearn how to use @material-tailwind/html components to quickly and easily create elegant and flexible pages using Tailwind CSS.\n\n@material-tailwind/html is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - \u003ca href=\"https://tailwindcss.com/docs/installation?ref=material-tailwind\" target=\"_blank\"\u003eTailwind CSS Installation.\u003c/a\u003e\n\n\u003cbr /\u003e\n\n1. Install `@material-tailwind/html`\n\n```bash\nnpm i @material-tailwind/html\n```\n\n\u003cbr /\u003e\n\n2. Once you install @material-tailwind/html you need to wrap your tailwind css configurations with the `withMT()` function coming from @material-tailwind/html/utils.\n\n```js\nconst withMT = require(\"@material-tailwind/html/utils/withMT\");\n\nmodule.exports = withMT({\n  content: [\"./index.html\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n});\n```\n\n\u003cbr /\u003e\n\n4. Congratulations 🥳, you did it, now you're ready to use @material-tailwind/html.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Community\n\nWe're excited to see the community adopt Material Tailwind, raise issues, and provide feedback.\nWhether it's a feature request, bug report, or a project to showcase, please get involved!\n\n- [Discord](https://discord.com/invite/FhCJCaHdQa)\n\n## Contributing\n\nContributions are always welcome!\n\nSee `CONTRIBUTING.md` for ways to get started.\n\nPlease adhere to this project's `CODE_OF_CONDUCT.md`.\n\n## License\n\n[MIT](https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE)\n","funding_links":["https://opencollective.com/material-tailwind"],"categories":["TypeScript","目录"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativetimofficial%2Fmaterial-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreativetimofficial%2Fmaterial-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativetimofficial%2Fmaterial-tailwind/lists"}