diff --git a/.eslintrc.json b/.eslintrc.json
index a22fc1bb0..0220e514b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,8 @@
{
- "extends": "next/core-web-vitals",
+ "parser": "@typescript-eslint/parser",
+ "extends": ["next/core-web-vitals", "prettier"],
"rules": {
- "react/no-unknown-property": "off"
+ "react/no-unknown-property": "off",
+ "@next/next/no-img-element": "off"
}
}
diff --git a/.npmrc b/.npmrc
index 8051a481e..5c6c95870 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,3 @@
+legacy-peer-deps=true
auto-install-peers=true
strict-peer-dependencies=false
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..5614e9945
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+documentation
\ No newline at end of file
diff --git a/.vercelignore b/.vercelignore
new file mode 100644
index 000000000..2a6300278
--- /dev/null
+++ b/.vercelignore
@@ -0,0 +1 @@
+packages/create-material-tailwind/templates
\ No newline at end of file
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 000000000..3c358317f
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2023 Material Tailwind (https://www.material-tailwind.com) by Creative Tim (https://www.creative-tim.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 30a3ece4d..7508973e3 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-
+
-
- Change your
-
- Button's
- {" "}
- design.
-
-
- Material Tailwind provides a simple way to customize your button;
- you can change the colors, fonts, styling, and everything you need.
-
-
-
-
-
-
- Awesome
-
- Color
- {" "}
- palette.
-
-
- Create a color theme that perfectly matches your style and brand,
- inspired by{" "}
-
- Material Design
-
- . Get color inspiration for your designs with Material Tailwind!
-
-
-
-
-
-
-
-
- Great for your awesome project
-
-
- Putting together a page has never been easier than
- matching together pre-made components. From landing
- pages presentation to login areas, you can easily
- customise and built your pages.
-
-
-`}
- />
-
-
-
-
-
-
-
- Great for your awesome project
-
-
- Putting together a page has never been easier than matching
- together pre-made components. From landing pages presentation to
- login areas, you can easily customise and built your pages.
-
-
- Putting together a page has never been easier than matching
- together pre-made components.
-
-
-
-
-
-
-
-
- Various styles of
-
- Components.
-
-
-
- Putting together a page has never been easier than matching our
- pre-made components. Add our ready-styled components to your
- project or modify them as you would like.
-
-
- {components.map((component, key) => (
-
- ))}
-
-
-
-
-
- );
-}
diff --git a/components/sections/features.tsx b/components/sections/features.tsx
deleted file mode 100644
index 2004bc81e..000000000
--- a/components/sections/features.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// @material-tailwind/react components
-import { Typography } from "@material-tailwind/react";
-
-// page components
-import Feature from "components/cards/feature";
-
-export default function SectionFeatures() {
- const features = [
- {
- icon: "dashboard",
- title: "Tailwind CSS Components",
- desc: "Material Tailwind comes with a huge number of Fully Coded Tailwind CSS components.",
- },
- {
- icon: "terminal",
- title: "JavaScript Components",
- desc: "Material Tailwind only features React and HTML components, but in the near future it will future more.",
- },
- {
- icon: "description",
- title: "Documentation",
- desc: "This extension comes a lot of fully coded examples that help you get started faster.",
- },
- {
- icon: "view_carousel",
- title: "Templates (soon)",
- desc: "Material Tailwind will come with fully coded sample pages so you could start working instantly.",
- },
- ];
-
- return (
-
-
-
- Tailwind CSS-Based Framework
-
-
- Material Tailwind features multiple React and HTML components, all
- written with Tailwind CSS classes and Material Design guidelines.
-
-
-
- With your favorite
-
- Framework.
-
-
-
- Material Tailwind components can be used with different popular
- frameworks like React and HTML. Angular and Vue.js versions are
- coming soon!
-
-
-
- Realistic
-
- Shadows
- {" "}
- included.
-
-
- Create a cohesive and modern-looking design for your website with
- our collection of realistic shadows. They will help your elements to
- pop-up.
-
-
-
- Trusted by over
-
- 1,855,822+ web developers
-
-
-
- Many Fortune 500 companies, startups, universities and governmental
- institutions love Creative Tim's products.
-
-
-
-
-
- "This is an excellent product, the documentation is excellent
- and helped me get things done more efficiently."
-
-
-
-
- "I found solution to all my design needs from Creative Tim. I
- use them as a freelancer in my hobby projects for fun! And its
- really affordable, very humble guys !!!"
-
-
-
-
- "Great product. Helped me cut the time to set up a site. I used
- the components within instead of starting from scratch. I highly
- recommend for developers who want to spend more time on the
- backend!."
-
-
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+
+
+
+
+
+
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+
+
+
+
+
+
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+
+
+
+
+
+
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+
+
+
+
+
+
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+
+
+
+
+
+
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+
+
+
+
+
+
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making
+ mistakes. We're constantly trying to express ourselves and
+ actualize our dreams.
+
+
+
+
+ );
+}
diff --git a/docs-content/html/accordion/index.ts b/docs-content/html/accordion/index.ts
new file mode 100644
index 000000000..11713e533
--- /dev/null
+++ b/docs-content/html/accordion/index.ts
@@ -0,0 +1,3 @@
+export * from "./accordion";
+export * from "./accordion-custom-icon";
+export * from "./accordion-disabled";
diff --git a/docs-content/html/alert/alert-colors.tsx b/docs-content/html/alert/alert-colors.tsx
new file mode 100644
index 000000000..462b26ea3
--- /dev/null
+++ b/docs-content/html/alert/alert-colors.tsx
@@ -0,0 +1,18 @@
+export function AlertColors() {
+ return (
+
+
+ An info alert for showing message.
+
+
+ An error alert for showing message.
+
+
+ A success alert for showing message.
+
+
+ A warning alert for showing message.
+
+
+ );
+}
diff --git a/docs-content/html/alert/alert-custom-close-icon.tsx b/docs-content/html/alert/alert-custom-close-icon.tsx
new file mode 100644
index 000000000..7075c2803
--- /dev/null
+++ b/docs-content/html/alert/alert-custom-close-icon.tsx
@@ -0,0 +1,34 @@
+export function AlertCustomCloseIcon() {
+ return (
+
+
+
+
+
+ Sorry, something went wrong please try again.
+
+
+
+ );
+}
diff --git a/docs-content/html/alert/alert-dismissible.tsx b/docs-content/html/alert/alert-dismissible.tsx
new file mode 100644
index 000000000..742719334
--- /dev/null
+++ b/docs-content/html/alert/alert-dismissible.tsx
@@ -0,0 +1,32 @@
+export function AlertDismissible() {
+ return (
+
+
A dismissible alert for showing message.
+
+
+ );
+}
diff --git a/docs-content/html/alert/alert-icon.tsx b/docs-content/html/alert/alert-icon.tsx
new file mode 100644
index 000000000..1478ce686
--- /dev/null
+++ b/docs-content/html/alert/alert-icon.tsx
@@ -0,0 +1,28 @@
+export function AlertIcon() {
+ return (
+
+
+
+
+
+ A simple alert with icon for showing message
+
+
+ );
+}
diff --git a/docs-content/html/alert/alert-variants.tsx b/docs-content/html/alert/alert-variants.tsx
new file mode 100644
index 000000000..35f8334dc
--- /dev/null
+++ b/docs-content/html/alert/alert-variants.tsx
@@ -0,0 +1,36 @@
+export function AlertVariants() {
+ return (
+
+
+
A simple filled alert for showing message.
+
+
+
+ A simple gradient alert for showing message.
+
+
+
+
+ A simple outlined alert for showing message.
+
+
+
+
+ A simple ghost alert for showing message.
+
+
+
+ );
+}
diff --git a/docs-content/html/alert/alert-with-content.tsx b/docs-content/html/alert/alert-with-content.tsx
new file mode 100644
index 000000000..cf50e4c87
--- /dev/null
+++ b/docs-content/html/alert/alert-with-content.tsx
@@ -0,0 +1,56 @@
+export function AlertWithContent() {
+ return (
+
+
+
+
+
+
+ Success
+
+
+ I don't know what that word means. Im happy. But success, that
+ goes back to what in somebody's eyes success means. For me,
+ success is inner peace. That's a good day for me.
+
+
+
+
+ );
+}
diff --git a/docs-content/html/alert/alert-with-list.tsx b/docs-content/html/alert/alert-with-list.tsx
new file mode 100644
index 000000000..a955e09e8
--- /dev/null
+++ b/docs-content/html/alert/alert-with-list.tsx
@@ -0,0 +1,126 @@
+export function AlertWithList() {
+ return (
+
+
+
+
+
+
+
+ Ensure that these requirements are met:
+
+
+
At least 10 characters (and up to 100 characters)
+
At least one lowercase character
+
Inclusion of at least one special character, e.g., ! @ # ?
+
+
+
+
+
+
+
+
+
+ Ensure that these requirements are met:
+
+
+
At least 10 characters (and up to 100 characters)
+
At least one lowercase character
+
Inclusion of at least one special character, e.g., ! @ # ?
+
+
+
+
+
+
+
+
+
+ Ensure that these requirements are met:
+
+
+
At least 10 characters (and up to 100 characters)
+
At least one lowercase character
+
Inclusion of at least one special character, e.g., ! @ # ?
+
+
+
+
+
+
+
+
+
+ Ensure that these requirements are met:
+
+
+
At least 10 characters (and up to 100 characters)
+
At least one lowercase character
+
Inclusion of at least one special character, e.g., ! @ # ?
+
+
+
+
+ );
+}
diff --git a/docs-content/html/alert/alert.tsx b/docs-content/html/alert/alert.tsx
new file mode 100644
index 000000000..2b2142bec
--- /dev/null
+++ b/docs-content/html/alert/alert.tsx
@@ -0,0 +1,10 @@
+export function AlertDefault() {
+ return (
+
+
A simple alert for showing message.
+
+ );
+}
diff --git a/docs-content/html/alert/index.ts b/docs-content/html/alert/index.ts
new file mode 100644
index 000000000..f81aa7968
--- /dev/null
+++ b/docs-content/html/alert/index.ts
@@ -0,0 +1,8 @@
+export * from "./alert";
+export * from "./alert-colors";
+export * from "./alert-custom-close-icon";
+export * from "./alert-dismissible";
+export * from "./alert-icon";
+export * from "./alert-variants";
+export * from "./alert-with-content";
+export * from "./alert-with-list";
diff --git a/docs-content/html/avatar/avatar-sizes.tsx b/docs-content/html/avatar/avatar-sizes.tsx
new file mode 100644
index 000000000..ecf5d3ee2
--- /dev/null
+++ b/docs-content/html/avatar/avatar-sizes.tsx
@@ -0,0 +1,36 @@
+export function AvatarSizes() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/avatar/avatar-stack.tsx b/docs-content/html/avatar/avatar-stack.tsx
new file mode 100644
index 000000000..b8ef3941b
--- /dev/null
+++ b/docs-content/html/avatar/avatar-stack.tsx
@@ -0,0 +1,31 @@
+export function AvatarStack() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/avatar/avatar-variants.tsx b/docs-content/html/avatar/avatar-variants.tsx
new file mode 100644
index 000000000..fb980f629
--- /dev/null
+++ b/docs-content/html/avatar/avatar-variants.tsx
@@ -0,0 +1,21 @@
+export function AvatarVariants() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/avatar/avatar-with-border.tsx b/docs-content/html/avatar/avatar-with-border.tsx
new file mode 100644
index 000000000..85d09d992
--- /dev/null
+++ b/docs-content/html/avatar/avatar-with-border.tsx
@@ -0,0 +1,21 @@
+export function AvatarWithBorder() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/avatar/avatar-with-dot-indicator.tsx b/docs-content/html/avatar/avatar-with-dot-indicator.tsx
new file mode 100644
index 000000000..1be4a0992
--- /dev/null
+++ b/docs-content/html/avatar/avatar-with-dot-indicator.tsx
@@ -0,0 +1,38 @@
+export function AvatarWithDotIndicator() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/card/card.tsx b/docs-content/html/card/card.tsx
new file mode 100644
index 000000000..4730167be
--- /dev/null
+++ b/docs-content/html/card/card.tsx
@@ -0,0 +1,30 @@
+export function CardDefault() {
+ return (
+
+
+
+
+
+
+ UI/UX Review Check
+
+
+ The place is close to Barceloneta Beach and bus stop just 2 min by
+ walk and near to "Naviglio" where you can enjoy the main night life in
+ Barcelona.
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/card/ecommerce-card.tsx b/docs-content/html/card/ecommerce-card.tsx
new file mode 100644
index 000000000..ec2ddc7cb
--- /dev/null
+++ b/docs-content/html/card/ecommerce-card.tsx
@@ -0,0 +1,35 @@
+export function EcommerceCard() {
+ return (
+
+
+
+
+
+
+
+ Apple AirPods
+
+
+ $95.00
+
+
+
+ With plenty of talk and listen time, voice-activated Siri access, and
+ an available wireless charging case.
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/card/horizontal-card.tsx b/docs-content/html/card/horizontal-card.tsx
new file mode 100644
index 000000000..e1b057563
--- /dev/null
+++ b/docs-content/html/card/horizontal-card.tsx
@@ -0,0 +1,49 @@
+export function HorizontalCard() {
+ return (
+
+
+
+
+
+
+ startups
+
+
+ Lyft launching cross-platform service this week
+
+
+ Like so many organizations these days, Autodesk is a company in
+ transition. It was until recently a traditional boxed software company
+ selling licenses. Yet its own business model disruption is only part
+ of the story
+
+ );
+}
diff --git a/docs-content/html/card/simple-card.tsx b/docs-content/html/card/simple-card.tsx
new file mode 100644
index 000000000..e7a78a6ac
--- /dev/null
+++ b/docs-content/html/card/simple-card.tsx
@@ -0,0 +1,24 @@
+export function SimpleCard() {
+ return (
+
+
+
+ UI/UX Review Check
+
+
+ The place is close to Barceloneta Beach and bus stop just 2 min by
+ walk and near to Naviglio where you can enjoy the main night life in
+ Barcelona.
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/card/testimonial-card.tsx b/docs-content/html/card/testimonial-card.tsx
new file mode 100644
index 000000000..e3031a238
--- /dev/null
+++ b/docs-content/html/card/testimonial-card.tsx
@@ -0,0 +1,92 @@
+export function TestimonialCard() {
+ return (
+
+
+
+
+
+
+ Tania Andrew
+
+
+
+
+
+
+
+
+
+
+ Frontend Lead @ Google
+
+
+
+
+
+ 'I found solution to all my design needs from Creative Tim. I use
+ them as a freelancer in my hobby projects for fun! And its really
+ affordable, very humble guys !!!'
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox-colors.tsx b/docs-content/html/checkbox/checkbox-colors.tsx
new file mode 100644
index 000000000..974d74bc7
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox-colors.tsx
@@ -0,0 +1,238 @@
+export function CheckboxColors() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox-custom-icon.tsx b/docs-content/html/checkbox/checkbox-custom-icon.tsx
new file mode 100644
index 000000000..dd734adcc
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox-custom-icon.tsx
@@ -0,0 +1,30 @@
+export function CheckboxCustomIcon() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox-custom-styles.tsx b/docs-content/html/checkbox/checkbox-custom-styles.tsx
new file mode 100644
index 000000000..fb6c515b5
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox-custom-styles.tsx
@@ -0,0 +1,32 @@
+export function CheckboxCustomStyles() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox-horizontal-list-group.tsx b/docs-content/html/checkbox/checkbox-horizontal-list-group.tsx
new file mode 100644
index 000000000..3963d9f62
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox-horizontal-list-group.tsx
@@ -0,0 +1,137 @@
+export function CheckboxHorizontalListGroup() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox-label.tsx b/docs-content/html/checkbox/checkbox-label.tsx
new file mode 100644
index 000000000..95e8e8487
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox-label.tsx
@@ -0,0 +1,38 @@
+export function CheckboxLabel() {
+ return (
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox-vertical-list-group.tsx b/docs-content/html/checkbox/checkbox-vertical-list-group.tsx
new file mode 100644
index 000000000..a984ab880
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox-vertical-list-group.tsx
@@ -0,0 +1,137 @@
+export function CheckboxVerticalListGroup() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox-with-description.tsx b/docs-content/html/checkbox/checkbox-with-description.tsx
new file mode 100644
index 000000000..17782ff48
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox-with-description.tsx
@@ -0,0 +1,45 @@
+export function CheckboxWithDescription() {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox-with-link.tsx b/docs-content/html/checkbox/checkbox-with-link.tsx
new file mode 100644
index 000000000..df4066b1e
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox-with-link.tsx
@@ -0,0 +1,47 @@
+export function CheckboxWithLink() {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/checkbox.tsx b/docs-content/html/checkbox/checkbox.tsx
new file mode 100644
index 000000000..92f2b5ad6
--- /dev/null
+++ b/docs-content/html/checkbox/checkbox.tsx
@@ -0,0 +1,33 @@
+export function CheckboxDefault() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/disabled-checkbox.tsx b/docs-content/html/checkbox/disabled-checkbox.tsx
new file mode 100644
index 000000000..d5f1f06d0
--- /dev/null
+++ b/docs-content/html/checkbox/disabled-checkbox.tsx
@@ -0,0 +1,39 @@
+export function DisabledCheckbox() {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs-content/html/checkbox/index.ts b/docs-content/html/checkbox/index.ts
new file mode 100644
index 000000000..ecdc43999
--- /dev/null
+++ b/docs-content/html/checkbox/index.ts
@@ -0,0 +1,11 @@
+export * from "./checkbox";
+export * from "./checkbox-colors";
+export * from "./checkbox-custom-icon";
+export * from "./checkbox-custom-styles";
+export * from "./checkbox-horizontal-list-group";
+export * from "./checkbox-label";
+export * from "./checkbox-ripple-effect";
+export * from "./checkbox-vertical-list-group";
+export * from "./checkbox-with-description";
+export * from "./checkbox-with-link";
+export * from "./disabled-checkbox";
diff --git a/docs-content/html/chip/chip-colors.tsx b/docs-content/html/chip/chip-colors.tsx
new file mode 100644
index 000000000..7f77264b9
--- /dev/null
+++ b/docs-content/html/chip/chip-colors.tsx
@@ -0,0 +1,33 @@
+export function ChipColors() {
+ return (
+
+
+ blue
+
+
+ red
+
+
+ green
+
+
+ amber
+
+
+ pink
+
+
+ indigo
+
+
+ purple
+
+
+ teal
+
+
+ cyan
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip-dismissible.tsx b/docs-content/html/chip/chip-dismissible.tsx
new file mode 100644
index 000000000..1efc7a629
--- /dev/null
+++ b/docs-content/html/chip/chip-dismissible.tsx
@@ -0,0 +1,32 @@
+export function ChipDismissible() {
+ return (
+
+ Dismissible
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip-icon.tsx b/docs-content/html/chip/chip-icon.tsx
new file mode 100644
index 000000000..2e7ffe840
--- /dev/null
+++ b/docs-content/html/chip/chip-icon.tsx
@@ -0,0 +1,74 @@
+export function ChipIcon() {
+ return (
+
+
+
+
+
+ account
+
+
+
+
+
+ account
+
+
+
+
+
+ account
+
+
+
+
+
+ account
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip-pills.tsx b/docs-content/html/chip/chip-pills.tsx
new file mode 100644
index 000000000..fe1060ed9
--- /dev/null
+++ b/docs-content/html/chip/chip-pills.tsx
@@ -0,0 +1,18 @@
+export function ChipPills() {
+ return (
+
+
+ chip filled
+
+
+ chip gradient
+
+
+ chip outlined
+
+
+ chip ghost
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip-sizes.tsx b/docs-content/html/chip/chip-sizes.tsx
new file mode 100644
index 000000000..351a8b0f1
--- /dev/null
+++ b/docs-content/html/chip/chip-sizes.tsx
@@ -0,0 +1,15 @@
+export function ChipSizes() {
+ return (
+
+
+ chip small
+
+
+ chip medium
+
+
+ chip large
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip-variants.tsx b/docs-content/html/chip/chip-variants.tsx
new file mode 100644
index 000000000..0160f1f4e
--- /dev/null
+++ b/docs-content/html/chip/chip-variants.tsx
@@ -0,0 +1,18 @@
+export function ChipVariants() {
+ return (
+
+
+ chip filled
+
+
+ chip gradient
+
+
+ chip outlined
+
+
+ chip ghost
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip-with-avatar.tsx b/docs-content/html/chip/chip-with-avatar.tsx
new file mode 100644
index 000000000..8ac0e911c
--- /dev/null
+++ b/docs-content/html/chip/chip-with-avatar.tsx
@@ -0,0 +1,18 @@
+export function ChipWithAvatar() {
+ return (
+
+
+
+
+
+
+ Tania Andrew
+
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip-with-checkbox.tsx b/docs-content/html/chip/chip-with-checkbox.tsx
new file mode 100644
index 000000000..65d661c9e
--- /dev/null
+++ b/docs-content/html/chip/chip-with-checkbox.tsx
@@ -0,0 +1,72 @@
+export function ChipWithCheckbox() {
+ return (
+
+
+
+
+
+
+
+ Online
+
+
+
+
+
+
+
+ Offline
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip-with-status.tsx b/docs-content/html/chip/chip-with-status.tsx
new file mode 100644
index 000000000..99359e7c0
--- /dev/null
+++ b/docs-content/html/chip/chip-with-status.tsx
@@ -0,0 +1,18 @@
+export function ChipWithStatus() {
+ return (
+
+
+
+
+
+ Online
+
+
+
+
+
+ Offline
+
+
+ );
+}
diff --git a/docs-content/html/chip/chip.tsx b/docs-content/html/chip/chip.tsx
new file mode 100644
index 000000000..3ca3a3e66
--- /dev/null
+++ b/docs-content/html/chip/chip.tsx
@@ -0,0 +1,7 @@
+export function ChipDefault() {
+ return (
+
+ chip
+
+ );
+}
diff --git a/docs-content/html/chip/index.ts b/docs-content/html/chip/index.ts
new file mode 100644
index 000000000..fafd5e78b
--- /dev/null
+++ b/docs-content/html/chip/index.ts
@@ -0,0 +1,10 @@
+export * from "./chip";
+export * from "./chip-colors";
+export * from "./chip-dismissible";
+export * from "./chip-icon";
+export * from "./chip-pills";
+export * from "./chip-sizes";
+export * from "./chip-variants";
+export * from "./chip-with-avatar";
+export * from "./chip-with-checkbox";
+export * from "./chip-with-status";
diff --git a/docs-content/html/collapse/default-collapse.tsx b/docs-content/html/collapse/default-collapse.tsx
new file mode 100644
index 000000000..771ca00d3
--- /dev/null
+++ b/docs-content/html/collapse/default-collapse.tsx
@@ -0,0 +1,26 @@
+export function DefaultCollapse() {
+ return (
+ <>
+
+
+
+
+
+ Use our Tailwind CSS collapse for your website. You can use if for
+ accordion, collapsible items and much more.
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/collapse/index.ts b/docs-content/html/collapse/index.ts
new file mode 100644
index 000000000..18ba2cb36
--- /dev/null
+++ b/docs-content/html/collapse/index.ts
@@ -0,0 +1 @@
+export * from "./default-collapse";
diff --git a/docs-content/html/dialog/dialog-custom-animation.tsx b/docs-content/html/dialog/dialog-custom-animation.tsx
new file mode 100644
index 000000000..e6b00308f
--- /dev/null
+++ b/docs-content/html/dialog/dialog-custom-animation.tsx
@@ -0,0 +1,52 @@
+export function DialogCustomAnimation() {
+ return (
+ <>
+
+
+
+
+ Its a simple dialog.
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty five
+ years of blood sweat and tears, and I'm never giving up,
+ I'm just getting started. I'm up to something. Fan luv.
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty five
+ years of blood sweat and tears, and I'm never giving up,
+ I'm just getting started. I'm up to something. Fan luv.
+
+
+
+
+
+
+
+
+
+
+
+ Its a simple dialog.
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty five
+ years of blood sweat and tears, and I'm never giving up,
+ I'm just getting started. I'm up to something. Fan luv.
+
+
+
+
+
+
+
+
+
+
+
+ {`Its a simple dialog.`}
+
+
+ {`The key to more success is to have a lot of pillows. Put it this way, it took me
+ twenty five years to get these plants, twenty five years of blood sweat and tears, and
+ I'm never giving up, I'm just getting started. I'm up to something. Fan
+ luv.`}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Its a simple dialog.
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty five
+ years of blood sweat and tears, and I'm never giving up,
+ I'm just getting started. I'm up to something. Fan luv.
+
+
+
+
+
+
+
+
+
+
+
+ Its a simple dialog.
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty five
+ years of blood sweat and tears, and I'm never giving up,
+ I'm just getting started. I'm up to something. Fan luv.
+
+
+
+
+
+
+
+
+
+
+
+ {`Its a simple dialog.`}
+
+
+ {`The key to more success is to have a lot of pillows. Put it this way, it took me
+ twenty five years to get these plants, twenty five years of blood sweat and tears, and
+ I'm never giving up, I'm just getting started. I'm up to something. Fan
+ luv.`}
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty five
+ years of blood sweat and tears, and I'm never giving up,
+ I'm just getting started. I'm up to something. Fan luv.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/dialog/index.ts b/docs-content/html/dialog/index.ts
new file mode 100644
index 000000000..a6cc29eaa
--- /dev/null
+++ b/docs-content/html/dialog/index.ts
@@ -0,0 +1,6 @@
+export * from "./dialog";
+export * from "./dialog-sizes";
+export * from "./web-3-dialog";
+export * from "./dialog-with-form";
+export * from "./dialog-with-image";
+export * from "./dialog-custom-animation";
diff --git a/docs-content/html/dialog/web-3-dialog.tsx b/docs-content/html/dialog/web-3-dialog.tsx
new file mode 100644
index 000000000..8f136cd15
--- /dev/null
+++ b/docs-content/html/dialog/web-3-dialog.tsx
@@ -0,0 +1,124 @@
+export function Web3Dialog() {
+ return (
+ <>
+
+
+
+
+
+
+ Connect a Wallet
+
+
+ Choose which card you want to connect
+
+
+
+
+
+
+
+ Popular
+
+
+
+
+
+
+
+
+ Other
+
+
+
+
+
+
+
+
+ New to Ethereum wallets?
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/footer/footer-with-logo.tsx b/docs-content/html/footer/footer-with-logo.tsx
new file mode 100644
index 000000000..2e80b6cbc
--- /dev/null
+++ b/docs-content/html/footer/footer-with-logo.tsx
@@ -0,0 +1,47 @@
+export function FooterWithLogo() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/footer/footer-with-sitemap.tsx b/docs-content/html/footer/footer-with-sitemap.tsx
new file mode 100644
index 000000000..334689cd1
--- /dev/null
+++ b/docs-content/html/footer/footer-with-sitemap.tsx
@@ -0,0 +1,256 @@
+export function FooterWithSitemap() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/footer/footer-with-social-links.tsx b/docs-content/html/footer/footer-with-social-links.tsx
new file mode 100644
index 000000000..d4cf8c4a3
--- /dev/null
+++ b/docs-content/html/footer/footer-with-social-links.tsx
@@ -0,0 +1,216 @@
+export function FooterWithSocialLinks() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/footer/index.ts b/docs-content/html/footer/index.ts
new file mode 100644
index 000000000..c872442f4
--- /dev/null
+++ b/docs-content/html/footer/index.ts
@@ -0,0 +1,4 @@
+export * from "./simple-footer";
+export * from "./footer-with-logo";
+export * from "./footer-with-sitemap";
+export * from "./footer-with-social-links";
\ No newline at end of file
diff --git a/docs-content/html/footer/simple-footer.tsx b/docs-content/html/footer/simple-footer.tsx
new file mode 100644
index 000000000..fc0cef562
--- /dev/null
+++ b/docs-content/html/footer/simple-footer.tsx
@@ -0,0 +1,43 @@
+export function SimpleFooter() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/form/checkout-form.tsx b/docs-content/html/form/checkout-form.tsx
new file mode 100644
index 000000000..5ce8a71da
--- /dev/null
+++ b/docs-content/html/form/checkout-form.tsx
@@ -0,0 +1,167 @@
+export function CheckoutForm() {
+ return (
+
+
+
+
+
+
+ Material Tailwind PRO
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/form/index.ts b/docs-content/html/form/index.ts
new file mode 100644
index 000000000..78bf12464
--- /dev/null
+++ b/docs-content/html/form/index.ts
@@ -0,0 +1,2 @@
+export * from "./simple-registration-form";
+export * from "./checkout-form";
diff --git a/docs-content/html/form/simple-registration-form.tsx b/docs-content/html/form/simple-registration-form.tsx
new file mode 100644
index 000000000..c1a0d26a2
--- /dev/null
+++ b/docs-content/html/form/simple-registration-form.tsx
@@ -0,0 +1,101 @@
+export function SimpleRegistrationForm() {
+ return (
+
+
+ Sign Up
+
+
+ Nice to meet you! Enter your details to register.
+
+
+
+ );
+}
diff --git a/docs-content/html/gallery/default-gallery.tsx b/docs-content/html/gallery/default-gallery.tsx
new file mode 100644
index 000000000..8b64fef79
--- /dev/null
+++ b/docs-content/html/gallery/default-gallery.tsx
@@ -0,0 +1,69 @@
+export function DefaultGallery() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/gallery/featured-image-gallery.tsx b/docs-content/html/gallery/featured-image-gallery.tsx
new file mode 100644
index 000000000..8719463bc
--- /dev/null
+++ b/docs-content/html/gallery/featured-image-gallery.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+export function FeaturedImageGallery() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/gallery/gallery-with-tab.tsx b/docs-content/html/gallery/gallery-with-tab.tsx
new file mode 100644
index 000000000..6db5111f7
--- /dev/null
+++ b/docs-content/html/gallery/gallery-with-tab.tsx
@@ -0,0 +1,200 @@
+export function GalleryWithTab() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/icon-button/icon-button.tsx b/docs-content/html/icon-button/icon-button.tsx
new file mode 100644
index 000000000..c5661ba5f
--- /dev/null
+++ b/docs-content/html/icon-button/icon-button.tsx
@@ -0,0 +1,12 @@
+export function IconButtonDefault() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/icon-button/index.ts b/docs-content/html/icon-button/index.ts
new file mode 100644
index 000000000..a570b89b6
--- /dev/null
+++ b/docs-content/html/icon-button/index.ts
@@ -0,0 +1,8 @@
+export * from "./icon-button";
+export * from "./icon-button-colors";
+export * from "./icon-button-custom-styles";
+export * from "./icon-button-ripple-effect";
+export * from "./icon-button-rounded";
+export * from "./icon-button-sizes";
+export * from "./icon-button-variants";
+export * from "./icon-button-with-link";
diff --git a/docs-content/html/img/circular-img.tsx b/docs-content/html/img/circular-img.tsx
new file mode 100644
index 000000000..1ce225a25
--- /dev/null
+++ b/docs-content/html/img/circular-img.tsx
@@ -0,0 +1,11 @@
+export function CircularImg() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/img/default-img.tsx b/docs-content/html/img/default-img.tsx
new file mode 100644
index 000000000..5087bec3a
--- /dev/null
+++ b/docs-content/html/img/default-img.tsx
@@ -0,0 +1,11 @@
+export function DefaultImg() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/img/img-with-blurred-caption.tsx b/docs-content/html/img/img-with-blurred-caption.tsx
new file mode 100644
index 000000000..959636b22
--- /dev/null
+++ b/docs-content/html/img/img-with-blurred-caption.tsx
@@ -0,0 +1,26 @@
+export function ImgWithBlurredCaption() {
+ return (
+
+
+
+
+
+
+ Sara Lamalo
+
+
+ 20 July 2022
+
+
+
+ Growth
+
+
+
+
+ );
+}
diff --git a/docs-content/html/img/img-with-caption.tsx b/docs-content/html/img/img-with-caption.tsx
new file mode 100644
index 000000000..8792cdae2
--- /dev/null
+++ b/docs-content/html/img/img-with-caption.tsx
@@ -0,0 +1,14 @@
+export function ImgWithCaption() {
+ return (
+
+
+
+ Image caption
+
+
+ );
+}
diff --git a/docs-content/html/img/img-with-rounded-corners.tsx b/docs-content/html/img/img-with-rounded-corners.tsx
new file mode 100644
index 000000000..84497adc2
--- /dev/null
+++ b/docs-content/html/img/img-with-rounded-corners.tsx
@@ -0,0 +1,11 @@
+export function ImgWithRoundedCorners() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/img/img-with-shadow.tsx b/docs-content/html/img/img-with-shadow.tsx
new file mode 100644
index 000000000..bbda1c007
--- /dev/null
+++ b/docs-content/html/img/img-with-shadow.tsx
@@ -0,0 +1,11 @@
+export function ImgWithShadow() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/img/index.ts b/docs-content/html/img/index.ts
new file mode 100644
index 000000000..80a5238e0
--- /dev/null
+++ b/docs-content/html/img/index.ts
@@ -0,0 +1,6 @@
+export * from "./default-img";
+export * from "./circular-img";
+export * from "./img-with-shadow";
+export * from "./img-with-caption";
+export * from "./img-with-rounded-corners";
+export * from "./img-with-blurred-caption";
\ No newline at end of file
diff --git a/docs-content/html/input/index.ts b/docs-content/html/input/index.ts
new file mode 100644
index 000000000..06f2ad0d8
--- /dev/null
+++ b/docs-content/html/input/index.ts
@@ -0,0 +1,11 @@
+export * from "./input";
+export * from "./input-colors";
+export * from "./input-custom-styles";
+export * from "./input-disabled";
+export * from "./input-for-dark-surface";
+export * from "./input-icon";
+export * from "./input-sizes";
+export * from "./input-validations";
+export * from "./input-variants";
+export * from "./input-with-button";
+export * from "./input-with-helper-text";
diff --git a/docs-content/html/input/input-colors.tsx b/docs-content/html/input/input-colors.tsx
new file mode 100644
index 000000000..32df20506
--- /dev/null
+++ b/docs-content/html/input/input-colors.tsx
@@ -0,0 +1,42 @@
+export function InputColors() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-custom-styles.tsx b/docs-content/html/input/input-custom-styles.tsx
new file mode 100644
index 000000000..44f6fe37a
--- /dev/null
+++ b/docs-content/html/input/input-custom-styles.tsx
@@ -0,0 +1,14 @@
+export function InputCustomStyles() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-disabled.tsx b/docs-content/html/input/input-disabled.tsx
new file mode 100644
index 000000000..6a7edfe52
--- /dev/null
+++ b/docs-content/html/input/input-disabled.tsx
@@ -0,0 +1,16 @@
+export function InputDisabled() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-for-dark-surface.tsx b/docs-content/html/input/input-for-dark-surface.tsx
new file mode 100644
index 000000000..26caa2f68
--- /dev/null
+++ b/docs-content/html/input/input-for-dark-surface.tsx
@@ -0,0 +1,18 @@
+export function InputForDarkSurface() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-icon.tsx b/docs-content/html/input/input-icon.tsx
new file mode 100644
index 000000000..e57b86154
--- /dev/null
+++ b/docs-content/html/input/input-icon.tsx
@@ -0,0 +1,18 @@
+export function InputIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-sizes.tsx b/docs-content/html/input/input-sizes.tsx
new file mode 100644
index 000000000..d483250b7
--- /dev/null
+++ b/docs-content/html/input/input-sizes.tsx
@@ -0,0 +1,24 @@
+export function InputSizes() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-validations.tsx b/docs-content/html/input/input-validations.tsx
new file mode 100644
index 000000000..3eb30667a
--- /dev/null
+++ b/docs-content/html/input/input-validations.tsx
@@ -0,0 +1,24 @@
+export function InputValidations() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-variants.tsx b/docs-content/html/input/input-variants.tsx
new file mode 100644
index 000000000..b00e49ab6
--- /dev/null
+++ b/docs-content/html/input/input-variants.tsx
@@ -0,0 +1,33 @@
+export function InputVariants() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-with-button.tsx b/docs-content/html/input/input-with-button.tsx
new file mode 100644
index 000000000..5f86daf4a
--- /dev/null
+++ b/docs-content/html/input/input-with-button.tsx
@@ -0,0 +1,24 @@
+export function InputWithButton() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/input/input-with-helper-text.tsx b/docs-content/html/input/input-with-helper-text.tsx
new file mode 100644
index 000000000..564855c16
--- /dev/null
+++ b/docs-content/html/input/input-with-helper-text.tsx
@@ -0,0 +1,31 @@
+export function InputWithHelperText() {
+ return (
+
+
+
+
+
+
+
+ Use at least 8 characters, one uppercase, one lowercase and one number.
+
+
+ );
+}
diff --git a/docs-content/html/input/input.tsx b/docs-content/html/input/input.tsx
new file mode 100644
index 000000000..85216bea8
--- /dev/null
+++ b/docs-content/html/input/input.tsx
@@ -0,0 +1,15 @@
+export function InputDefault() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/list/index.ts b/docs-content/html/list/index.ts
new file mode 100644
index 000000000..5a2316e41
--- /dev/null
+++ b/docs-content/html/list/index.ts
@@ -0,0 +1,8 @@
+export * from "./list";
+export * from "./list-custom-styles";
+export * from "./list-with-avatar";
+export * from "./list-with-badge";
+export * from "./list-with-disabled-item";
+export * from "./list-with-icon";
+export * from "./list-with-link";
+export * from "./list-with-selected-item";
diff --git a/docs-content/html/list/list-custom-styles.tsx b/docs-content/html/list/list-custom-styles.tsx
new file mode 100644
index 000000000..baf205d49
--- /dev/null
+++ b/docs-content/html/list/list-custom-styles.tsx
@@ -0,0 +1,84 @@
+export function ListCustomStyles() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/list/list-with-avatar.tsx b/docs-content/html/list/list-with-avatar.tsx
new file mode 100644
index 000000000..15c86d20a
--- /dev/null
+++ b/docs-content/html/list/list-with-avatar.tsx
@@ -0,0 +1,68 @@
+export function ListWithAvatar() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/list/list-with-badge.tsx b/docs-content/html/list/list-with-badge.tsx
new file mode 100644
index 000000000..e135fac81
--- /dev/null
+++ b/docs-content/html/list/list-with-badge.tsx
@@ -0,0 +1,41 @@
+export function ListWithBadge() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/list/list-with-disabled-item.tsx b/docs-content/html/list/list-with-disabled-item.tsx
new file mode 100644
index 000000000..7b579b3c1
--- /dev/null
+++ b/docs-content/html/list/list-with-disabled-item.tsx
@@ -0,0 +1,26 @@
+export function ListWithDisabledItem() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/list/list-with-icon.tsx b/docs-content/html/list/list-with-icon.tsx
new file mode 100644
index 000000000..670f6ed0c
--- /dev/null
+++ b/docs-content/html/list/list-with-icon.tsx
@@ -0,0 +1,89 @@
+export function ListWithIcon() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/list/list-with-link.tsx b/docs-content/html/list/list-with-link.tsx
new file mode 100644
index 000000000..f190b6147
--- /dev/null
+++ b/docs-content/html/list/list-with-link.tsx
@@ -0,0 +1,32 @@
+export function ListWithLink() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/list/list-with-selected-item.tsx b/docs-content/html/list/list-with-selected-item.tsx
new file mode 100644
index 000000000..05f2234f8
--- /dev/null
+++ b/docs-content/html/list/list-with-selected-item.tsx
@@ -0,0 +1,26 @@
+export function ListWithSelectedItem() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/list/list.tsx b/docs-content/html/list/list.tsx
new file mode 100644
index 000000000..5c3ffd1ac
--- /dev/null
+++ b/docs-content/html/list/list.tsx
@@ -0,0 +1,26 @@
+export function ListDefault() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/html/mega-menu/index.ts b/docs-content/html/mega-menu/index.ts
new file mode 100644
index 000000000..9a3c77c54
--- /dev/null
+++ b/docs-content/html/mega-menu/index.ts
@@ -0,0 +1 @@
+export * from "./mega-menu";
diff --git a/docs-content/html/mega-menu/mega-menu.tsx b/docs-content/html/mega-menu/mega-menu.tsx
new file mode 100644
index 000000000..05fcbec25
--- /dev/null
+++ b/docs-content/html/mega-menu/mega-menu.tsx
@@ -0,0 +1,394 @@
+export function MegaMenuDefault() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/docs-content/html/navbar/index.ts b/docs-content/html/navbar/index.ts
new file mode 100644
index 000000000..3d081a090
--- /dev/null
+++ b/docs-content/html/navbar/index.ts
@@ -0,0 +1,5 @@
+export * from "./navbar";
+export * from "./navbar-dark";
+export * from "./navbar-with-search";
+export * from "./navbar-simple";
+export * from "./sticky-navbar";
diff --git a/docs-content/html/navbar/navbar-dark.tsx b/docs-content/html/navbar/navbar-dark.tsx
new file mode 100644
index 000000000..3d91e94fd
--- /dev/null
+++ b/docs-content/html/navbar/navbar-dark.tsx
@@ -0,0 +1,74 @@
+export function NavbarDark() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/navbar/navbar-simple.tsx b/docs-content/html/navbar/navbar-simple.tsx
new file mode 100644
index 000000000..4da7dfc7c
--- /dev/null
+++ b/docs-content/html/navbar/navbar-simple.tsx
@@ -0,0 +1,72 @@
+export function NavbarSimple() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/navbar/navbar-with-search.tsx b/docs-content/html/navbar/navbar-with-search.tsx
new file mode 100644
index 000000000..6b24bbe34
--- /dev/null
+++ b/docs-content/html/navbar/navbar-with-search.tsx
@@ -0,0 +1,149 @@
+export function NavbarWithSearch() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/navbar/navbar.tsx b/docs-content/html/navbar/navbar.tsx
new file mode 100644
index 000000000..544b64771
--- /dev/null
+++ b/docs-content/html/navbar/navbar.tsx
@@ -0,0 +1,124 @@
+export function NavbarDefault() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/navbar/sticky-navbar.tsx b/docs-content/html/navbar/sticky-navbar.tsx
new file mode 100644
index 000000000..6d30f3790
--- /dev/null
+++ b/docs-content/html/navbar/sticky-navbar.tsx
@@ -0,0 +1,105 @@
+export function StickyNavbar() {
+ return (
+
+
+
+
+
+
+
+
+ What is Material Tailwind
+
+
+ Can you help me out? you will get a lot of free exposure doing this
+ can my website be in english?. There is too much white space do less
+ with more, so that will be a conversation piece can you rework to
+ make the pizza look more delicious other agencies charge much lesser
+ can you make the blue bluer?. I think we need to start from scratch
+ can my website be in english?, yet make it sexy i'll pay you in
+ a week we don't need to pay upfront i hope you understand can
+ you make it stand out more?. Make the font bigger can you help me
+ out? you will get a lot of free exposure doing this that's
+ going to be a chunk of change other agencies charge much lesser. Are
+ you busy this weekend? I have a new project with a tight deadline
+ that's going to be a chunk of change. There are more projects
+ lined up charge extra the next time.
+
+
+
+
+ );
+}
diff --git a/docs-content/html/pagination/circular-pagination.tsx b/docs-content/html/pagination/circular-pagination.tsx
new file mode 100644
index 000000000..901bbf08f
--- /dev/null
+++ b/docs-content/html/pagination/circular-pagination.tsx
@@ -0,0 +1,90 @@
+export function CircularPagination() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/pagination/default-pagination.tsx b/docs-content/html/pagination/default-pagination.tsx
new file mode 100644
index 000000000..96f0b863b
--- /dev/null
+++ b/docs-content/html/pagination/default-pagination.tsx
@@ -0,0 +1,91 @@
+export function DefaultPagination() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/pagination/index.ts b/docs-content/html/pagination/index.ts
new file mode 100644
index 000000000..66a78287c
--- /dev/null
+++ b/docs-content/html/pagination/index.ts
@@ -0,0 +1,4 @@
+export * from "./default-pagination";
+export * from "./circular-pagination";
+export * from "./simple-pagination";
+export * from "./pagination-group";
diff --git a/docs-content/html/pagination/pagination-group.tsx b/docs-content/html/pagination/pagination-group.tsx
new file mode 100644
index 000000000..8aa194126
--- /dev/null
+++ b/docs-content/html/pagination/pagination-group.tsx
@@ -0,0 +1,90 @@
+export function PaginationGroup() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/pagination/simple-pagination.tsx b/docs-content/html/pagination/simple-pagination.tsx
new file mode 100644
index 000000000..27a4e51c5
--- /dev/null
+++ b/docs-content/html/pagination/simple-pagination.tsx
@@ -0,0 +1,55 @@
+export function SimplePagination() {
+ return (
+
+
+
+ Page 1 of
+ 10
+
+
+
+ );
+}
diff --git a/docs-content/html/plugins/clipboard/clipboard-default.tsx b/docs-content/html/plugins/clipboard/clipboard-default.tsx
new file mode 100644
index 000000000..638c2fcfe
--- /dev/null
+++ b/docs-content/html/plugins/clipboard/clipboard-default.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { IconButton, Typography } from "@material-tailwind/react";
+import { useCopyToClipboard } from "usehooks-ts";
+import { CheckIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+
+export function ClipboardDefault() {
+ const [value, copy] = useCopyToClipboard();
+ const [copied, setCopied] = React.useState(false);
+
+ return (
+
+ Material Tailwind is an easy to use components library for Tailwind
+ CSS and Material Design. It features multiple React and HTML
+ components, all written with Tailwind CSS classNamees and Material
+ Design guidelines.
+
+ );
+}
diff --git a/docs-content/html/textarea/comment-box-textarea.tsx b/docs-content/html/textarea/comment-box-textarea.tsx
new file mode 100644
index 000000000..3469dfb8f
--- /dev/null
+++ b/docs-content/html/textarea/comment-box-textarea.tsx
@@ -0,0 +1,53 @@
+export function CommentBoxTextarea() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/textarea/index.ts b/docs-content/html/textarea/index.ts
new file mode 100644
index 000000000..a1030ad74
--- /dev/null
+++ b/docs-content/html/textarea/index.ts
@@ -0,0 +1,8 @@
+export * from "./comment-box-textarea";
+export * from "./textarea";
+export * from "./textarea-colors";
+export * from "./textarea-disabled";
+export * from "./textarea-sizes";
+export * from "./textarea-validations";
+export * from "./textarea-variants";
+export * from "./twitter-chatbox-textarea";
diff --git a/docs-content/html/textarea/textarea-colors.tsx b/docs-content/html/textarea/textarea-colors.tsx
new file mode 100644
index 000000000..54c93da42
--- /dev/null
+++ b/docs-content/html/textarea/textarea-colors.tsx
@@ -0,0 +1,42 @@
+export function TextareaColors() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/textarea/textarea-disabled.tsx b/docs-content/html/textarea/textarea-disabled.tsx
new file mode 100644
index 000000000..28e8e82c5
--- /dev/null
+++ b/docs-content/html/textarea/textarea-disabled.tsx
@@ -0,0 +1,16 @@
+export function TextareaDisabled() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/textarea/textarea-sizes.tsx b/docs-content/html/textarea/textarea-sizes.tsx
new file mode 100644
index 000000000..0072ee0f5
--- /dev/null
+++ b/docs-content/html/textarea/textarea-sizes.tsx
@@ -0,0 +1,24 @@
+export function TextareaSizes() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/textarea/textarea-validations.tsx b/docs-content/html/textarea/textarea-validations.tsx
new file mode 100644
index 000000000..582a4804b
--- /dev/null
+++ b/docs-content/html/textarea/textarea-validations.tsx
@@ -0,0 +1,24 @@
+export function TextareaValidations() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/textarea/textarea-variants.tsx b/docs-content/html/textarea/textarea-variants.tsx
new file mode 100644
index 000000000..ab5b0ee6a
--- /dev/null
+++ b/docs-content/html/textarea/textarea-variants.tsx
@@ -0,0 +1,33 @@
+export function TextareaVariants() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/textarea/textarea.tsx b/docs-content/html/textarea/textarea.tsx
new file mode 100644
index 000000000..1a8ff10e4
--- /dev/null
+++ b/docs-content/html/textarea/textarea.tsx
@@ -0,0 +1,17 @@
+import { Textarea } from "@material-tailwind/react";
+
+export function TextareaDefault() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/textarea/twitter-chatbox-textarea.tsx b/docs-content/html/textarea/twitter-chatbox-textarea.tsx
new file mode 100644
index 000000000..9b8483d28
--- /dev/null
+++ b/docs-content/html/textarea/twitter-chatbox-textarea.tsx
@@ -0,0 +1,77 @@
+export function TwitterChatboxTextarea() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/timeline/activities-timeline.tsx b/docs-content/html/timeline/activities-timeline.tsx
new file mode 100644
index 000000000..a3f617cb6
--- /dev/null
+++ b/docs-content/html/timeline/activities-timeline.tsx
@@ -0,0 +1,97 @@
+export function ActivitiesTimeline() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ $2400, Design changes
+
+
+ 22 DEC 7:20 PM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New order #1832412
+
+
+ 21 DEC 11 PM
+
+
+
+
+
+
+
+
+
+
+
+ Payment completed for order #4395133
+
+
+ 20 DEC 2:20 AM
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/timeline/default-timeline.tsx b/docs-content/html/timeline/default-timeline.tsx
new file mode 100644
index 000000000..9eaa00dc3
--- /dev/null
+++ b/docs-content/html/timeline/default-timeline.tsx
@@ -0,0 +1,74 @@
+export function DefaultTimeline() {
+ return (
+
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/timeline/index.ts b/docs-content/html/timeline/index.ts
new file mode 100644
index 000000000..565725258
--- /dev/null
+++ b/docs-content/html/timeline/index.ts
@@ -0,0 +1,4 @@
+export * from "./default-timeline";
+export * from "./timeline-with-icon";
+export * from "./timeline-with-avatar";
+export * from "./activities-timeline";
diff --git a/docs-content/html/timeline/timeline-with-avatar.tsx b/docs-content/html/timeline/timeline-with-avatar.tsx
new file mode 100644
index 000000000..c3090ca17
--- /dev/null
+++ b/docs-content/html/timeline/timeline-with-avatar.tsx
@@ -0,0 +1,92 @@
+export function TimelineWithAvatar() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/timeline/timeline-with-icon.tsx b/docs-content/html/timeline/timeline-with-icon.tsx
new file mode 100644
index 000000000..189ea67b1
--- /dev/null
+++ b/docs-content/html/timeline/timeline-with-icon.tsx
@@ -0,0 +1,114 @@
+export function TimelineWithIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+
+
+
+
+ Timeline Title Here.
+
+
+
+
+
+
+ The key to more success is to have a lot of pillows. Put it this
+ way, it took me twenty five years to get these plants, twenty
+ five years of blood sweat and tears, and I'm never giving
+ up, I'm just getting started. I'm up to something. Fan
+ luv.
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/html/tooltip/index.ts b/docs-content/html/tooltip/index.ts
new file mode 100644
index 000000000..bd27cebb0
--- /dev/null
+++ b/docs-content/html/tooltip/index.ts
@@ -0,0 +1,3 @@
+export * from "./tooltip";
+export * from "./tooltip-custom-animation";
+export * from "./tooltip-placement";
diff --git a/docs-content/html/tooltip/tooltip-custom-animation.tsx b/docs-content/html/tooltip/tooltip-custom-animation.tsx
new file mode 100644
index 000000000..eef440353
--- /dev/null
+++ b/docs-content/html/tooltip/tooltip-custom-animation.tsx
@@ -0,0 +1,22 @@
+export function TooltipCustomAnimation() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/docs-content/html/typography/index.ts b/docs-content/html/typography/index.ts
new file mode 100644
index 000000000..eba342914
--- /dev/null
+++ b/docs-content/html/typography/index.ts
@@ -0,0 +1,7 @@
+export * from "./typography";
+export * from "./typography-colors";
+export * from "./typography-gradient-color";
+export * from "./typography-variants";
+export * from "./typography-load-text";
+export * from "./typography-paragraph";
+export * from "./typography-small-text";
diff --git a/docs-content/html/typography/typography-colors.tsx b/docs-content/html/typography/typography-colors.tsx
new file mode 100644
index 000000000..f5f09e646
--- /dev/null
+++ b/docs-content/html/typography/typography-colors.tsx
@@ -0,0 +1,18 @@
+export function TypographyColors() {
+ return (
+
+
+ Material Tailwind
+
+
+ Material Tailwind
+
+
+ Material Tailwind
+
+
+ Material Tailwind
+
+
+ );
+}
diff --git a/docs-content/html/typography/typography-gradient-color.tsx b/docs-content/html/typography/typography-gradient-color.tsx
new file mode 100644
index 000000000..d77d6c78f
--- /dev/null
+++ b/docs-content/html/typography/typography-gradient-color.tsx
@@ -0,0 +1,7 @@
+export function TypographyGradientColor() {
+ return (
+
+ Material Tailwind
+
+ );
+}
diff --git a/docs-content/html/typography/typography-load-text.tsx b/docs-content/html/typography/typography-load-text.tsx
new file mode 100644
index 000000000..10df487be
--- /dev/null
+++ b/docs-content/html/typography/typography-load-text.tsx
@@ -0,0 +1,10 @@
+export function TypographyLoadText() {
+ return (
+
+ Material Tailwind is an easy to use components library for Tailwind CSS
+ and Material Design. It provides a simple way to customize your
+ components, you can change the colors, fonts, breakpoints and everything
+ you need.
+
+ );
+}
diff --git a/docs-content/html/typography/typography-paragraph.tsx b/docs-content/html/typography/typography-paragraph.tsx
new file mode 100644
index 000000000..753309d58
--- /dev/null
+++ b/docs-content/html/typography/typography-paragraph.tsx
@@ -0,0 +1,10 @@
+export function TypographyParagraph() {
+ return (
+
+ Material Tailwind is an easy to use components library for Tailwind CSS
+ and Material Design. It provides a simple way to customize your
+ components, you can change the colors, fonts, breakpoints and everything
+ you need.
+
+ );
+}
diff --git a/docs-content/html/typography/typography-small-text.tsx b/docs-content/html/typography/typography-small-text.tsx
new file mode 100644
index 000000000..d90c727ac
--- /dev/null
+++ b/docs-content/html/typography/typography-small-text.tsx
@@ -0,0 +1,10 @@
+export function TypographySmallText() {
+ return (
+
+ Material Tailwind is an easy to use components library for Tailwind CSS
+ and Material Design. It provides a simple way to customize your
+ components, you can change the colors, fonts, breakpoints and everything
+ you need.
+
+ );
+}
diff --git a/docs-content/html/typography/typography-variants.tsx b/docs-content/html/typography/typography-variants.tsx
new file mode 100644
index 000000000..8c57e3fa5
--- /dev/null
+++ b/docs-content/html/typography/typography-variants.tsx
@@ -0,0 +1,24 @@
+export function TypographyVariants() {
+ return (
+
+
+ Material Tailwind
+
+
+ Material Tailwind
+
+
+ Material Tailwind
+
+
+ Material Tailwind
+
+
+ Material Tailwind
+
+
+ Material Tailwind
+
+
+ );
+}
diff --git a/docs-content/html/typography/typography.tsx b/docs-content/html/typography/typography.tsx
new file mode 100644
index 000000000..3e3d72684
--- /dev/null
+++ b/docs-content/html/typography/typography.tsx
@@ -0,0 +1,10 @@
+export function TypographyDefault() {
+ return (
+
+ Material Tailwind is an easy to use components library for Tailwind CSS
+ and Material Design. It provides a simple way to customize your
+ components, you can change the colors, fonts, breakpoints and everything
+ you need.
+
+ );
+}
diff --git a/docs-content/html/video/autoplay-video.tsx b/docs-content/html/video/autoplay-video.tsx
new file mode 100644
index 000000000..16dd7f5d3
--- /dev/null
+++ b/docs-content/html/video/autoplay-video.tsx
@@ -0,0 +1,8 @@
+export function AutoplayVideo() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/video/default-video.tsx b/docs-content/html/video/default-video.tsx
new file mode 100644
index 000000000..349ba14dd
--- /dev/null
+++ b/docs-content/html/video/default-video.tsx
@@ -0,0 +1,11 @@
+export function DefaultVideo() {
+ return (
+
+ );
+}
diff --git a/docs-content/html/video/index.ts b/docs-content/html/video/index.ts
new file mode 100644
index 000000000..690476492
--- /dev/null
+++ b/docs-content/html/video/index.ts
@@ -0,0 +1,3 @@
+export * from "./default-video";
+export * from "./autoplay-video";
+export * from "./muted-video";
\ No newline at end of file
diff --git a/docs-content/html/video/muted-video.tsx b/docs-content/html/video/muted-video.tsx
new file mode 100644
index 000000000..b853968d3
--- /dev/null
+++ b/docs-content/html/video/muted-video.tsx
@@ -0,0 +1,8 @@
+export function MutedVideo() {
+ return (
+
+ );
+}
diff --git a/docs-content/react/accordion/accordion-all-open.tsx b/docs-content/react/accordion/accordion-all-open.tsx
new file mode 100644
index 000000000..abf248b76
--- /dev/null
+++ b/docs-content/react/accordion/accordion-all-open.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+} from "@material-tailwind/react";
+
+export function AccordionAllOpen() {
+ const [openAcc1, setOpenAcc1] = React.useState(true);
+ const [openAcc2, setOpenAcc2] = React.useState(true);
+ const [openAcc3, setOpenAcc3] = React.useState(true);
+
+ const handleOpenAcc1 = () => setOpenAcc1((cur) => !cur);
+ const handleOpenAcc2 = () => setOpenAcc2((cur) => !cur);
+ const handleOpenAcc3 = () => setOpenAcc3((cur) => !cur);
+
+ return (
+ <>
+
+
+ What is Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+
+ How to use Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+
+ What can I do with Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ );
+}
diff --git a/docs-content/react/accordion/accordion-always-open.tsx b/docs-content/react/accordion/accordion-always-open.tsx
new file mode 100644
index 000000000..92e45a595
--- /dev/null
+++ b/docs-content/react/accordion/accordion-always-open.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+} from "@material-tailwind/react";
+
+export function AccordionAlwaysOpen() {
+ const [open, setOpen] = React.useState(0);
+ const [alwaysOpen, setAlwaysOpen] = React.useState(true);
+
+ const handleAlwaysOpen = () => setAlwaysOpen((cur) => !cur);
+ const handleOpen = (value) => setOpen(open === value ? 0 : value);
+
+ return (
+ <>
+
+
+ What is Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ handleOpen(1)}>
+ How to use Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ handleOpen(2)}>
+ What can I do with Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ );
+}
diff --git a/docs-content/react/accordion/accordion-custom-animation.tsx b/docs-content/react/accordion/accordion-custom-animation.tsx
new file mode 100644
index 000000000..15efcd394
--- /dev/null
+++ b/docs-content/react/accordion/accordion-custom-animation.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+} from "@material-tailwind/react";
+
+const CUSTOM_ANIMATION = {
+ mount: { scale: 1 },
+ unmount: { scale: 0.9 },
+};
+
+export function AccordionCustomAnimation() {
+ const [open, setOpen] = React.useState(0);
+
+ const handleOpen = (value) => setOpen(open === value ? 0 : value);
+
+ return (
+ <>
+
+ handleOpen(1)}>
+ What is Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ handleOpen(2)}>
+ How to use Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ handleOpen(3)}>
+ What can I do with Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ );
+}
diff --git a/docs-content/react/accordion/accordion-custom-icon.tsx b/docs-content/react/accordion/accordion-custom-icon.tsx
new file mode 100644
index 000000000..60404d677
--- /dev/null
+++ b/docs-content/react/accordion/accordion-custom-icon.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+} from "@material-tailwind/react";
+
+function Icon({ id, open }) {
+ return (
+
+ );
+}
+
+export function AccordionCustomIcon() {
+ const [open, setOpen] = React.useState(0);
+
+ const handleOpen = (value) => setOpen(open === value ? 0 : value);
+
+ return (
+ <>
+ }>
+ handleOpen(1)}>
+ What is Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+ }>
+ handleOpen(2)}>
+ How to use Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+ }>
+ handleOpen(3)}>
+ What can I do with Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ );
+}
diff --git a/docs-content/react/accordion/accordion-custom-styles.tsx b/docs-content/react/accordion/accordion-custom-styles.tsx
new file mode 100644
index 000000000..c74ff24cb
--- /dev/null
+++ b/docs-content/react/accordion/accordion-custom-styles.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+} from "@material-tailwind/react";
+
+export function AccordionCustomStyles() {
+ const [open, setOpen] = React.useState(1);
+
+ const handleOpen = (value) => setOpen(open === value ? 0 : value);
+
+ return (
+ <>
+
+ handleOpen(1)}
+ className={`border-b-0 transition-colors ${
+ open === 1 ? "text-blue-500 hover:!text-blue-700" : ""
+ }`}
+ >
+ What is Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ handleOpen(2)}
+ className={`border-b-0 transition-colors ${
+ open === 2 ? "text-blue-500 hover:!text-blue-700" : ""
+ }`}
+ >
+ How to use Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ handleOpen(3)}
+ className={`border-b-0 transition-colors ${
+ open === 3 ? "text-blue-500 hover:!text-blue-700" : ""
+ }`}
+ >
+ What can I do with Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ );
+}
diff --git a/docs-content/react/accordion/accordion-disabled.tsx b/docs-content/react/accordion/accordion-disabled.tsx
new file mode 100644
index 000000000..44e38b546
--- /dev/null
+++ b/docs-content/react/accordion/accordion-disabled.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+} from "@material-tailwind/react";
+
+export function AccordionDisabled() {
+ const [open, setOpen] = React.useState(0);
+
+ const handleOpen = (value) => setOpen(open === value ? 0 : value);
+
+ return (
+ <>
+
+ handleOpen(1)}>
+ What is Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ handleOpen(2)}>
+ How to use Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ handleOpen(3)}>
+ What can I do with Material Tailwind?
+
+
+ We're not always in the position that we want to be at.
+ We're constantly growing. We're constantly making mistakes.
+ We're constantly trying to express ourselves and actualize our
+ dreams.
+
+
+
+ );
+}
diff --git a/docs-content/react/accordion/accordion.tsx b/docs-content/react/accordion/accordion.tsx
new file mode 100644
index 000000000..9e51eedc3
--- /dev/null
+++ b/docs-content/react/accordion/accordion.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Accordion, AccordionHeader, AccordionBody } from "@material-tailwind/react";
+
+export function DefaultAccordion() {
+ const [open, setOpen] = React.useState(1);
+
+ const handleOpen = (value) => setOpen(open === value ? 0 : value);
+
+ return (
+ <>
+
+ handleOpen(1)}>What is Material Tailwind?
+
+ We're not always in the position that we want to be at. We're constantly
+ growing. We're constantly making mistakes. We're constantly trying to express
+ ourselves and actualize our dreams.
+
+
+
+ handleOpen(2)}>
+ How to use Material Tailwind?
+
+
+ We're not always in the position that we want to be at. We're constantly
+ growing. We're constantly making mistakes. We're constantly trying to express
+ ourselves and actualize our dreams.
+
+
+
+ handleOpen(3)}>
+ What can I do with Material Tailwind?
+
+
+ We're not always in the position that we want to be at. We're constantly
+ growing. We're constantly making mistakes. We're constantly trying to express
+ ourselves and actualize our dreams.
+
+
+
+ );
+}
diff --git a/docs-content/react/accordion/index.ts b/docs-content/react/accordion/index.ts
new file mode 100644
index 000000000..851f064e5
--- /dev/null
+++ b/docs-content/react/accordion/index.ts
@@ -0,0 +1,7 @@
+export * from "./accordion";
+export * from "./accordion-all-open";
+export * from "./accordion-always-open";
+export * from "./accordion-custom-animation";
+export * from "./accordion-custom-icon";
+export * from "./accordion-custom-styles";
+export * from "./accordion-disabled";
diff --git a/docs-content/react/alert/alert-colors.tsx b/docs-content/react/alert/alert-colors.tsx
new file mode 100644
index 000000000..667a19dc1
--- /dev/null
+++ b/docs-content/react/alert/alert-colors.tsx
@@ -0,0 +1,12 @@
+import { Alert } from "@material-tailwind/react";
+
+export function AlertColors() {
+ return (
+
+ An info alert for showing message.
+ An error alert for showing message.
+ A success alert for showing message.
+ A warning alert for showing message.
+
+ A simple filled alert for showing message.
+
+ A simple gradient alert for showing message.
+
+
+ A simple outlined alert for showing message.
+
+
+ A simple ghost alert for showing message.
+
+
+ );
+}
diff --git a/docs-content/react/alert/alert-with-content.tsx b/docs-content/react/alert/alert-with-content.tsx
new file mode 100644
index 000000000..d8881fea3
--- /dev/null
+++ b/docs-content/react/alert/alert-with-content.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Alert, Button, Typography } from "@material-tailwind/react";
+
+function Icon() {
+ return (
+
+ );
+}
+
+export function AlertWithContent() {
+ const [open, setOpen] = React.useState(true);
+
+ return (
+ <>
+ {!open && (
+
+ )}
+ }
+ onClose={() => setOpen(false)}
+ >
+
+ Success
+
+
+ I don't know what that word means. I'm happy. But success,
+ that goes back to what in somebody's eyes success means. For me,
+ success is inner peace. That's a good day for me.
+
+
+
+ );
+}
diff --git a/docs-content/react/alert/alert-with-list.tsx b/docs-content/react/alert/alert-with-list.tsx
new file mode 100644
index 000000000..862757f9b
--- /dev/null
+++ b/docs-content/react/alert/alert-with-list.tsx
@@ -0,0 +1,84 @@
+import { Alert, Typography } from "@material-tailwind/react";
+
+function IconOutlined() {
+ return (
+
+ );
+}
+
+function IconSolid() {
+ return (
+
+ );
+}
+
+export function AlertWithList() {
+ return (
+
+ }>
+
+ Ensure that these requirements are met:
+
+
+
At least 10 characters (and up to 100 characters)
+
At least one lowercase character
+
Inclusion of at least one special character, e.g., ! @ # ?
+
+
+ }>
+
+ Ensure that these requirements are met:
+
+
+
At least 10 characters (and up to 100 characters)
+
At least one lowercase character
+
Inclusion of at least one special character, e.g., ! @ # ?
+
+
+ }>
+
+ Ensure that these requirements are met:
+
+
+
At least 10 characters (and up to 100 characters)
+
At least one lowercase character
+
Inclusion of at least one special character, e.g., ! @ # ?
+
+
+ }>
+
+ Ensure that these requirements are met:
+
+
+
At least 10 characters (and up to 100 characters)
+
At least one lowercase character
+
Inclusion of at least one special character, e.g., ! @ # ?
+
+
+
+ );
+}
diff --git a/docs-content/react/alert/alert.tsx b/docs-content/react/alert/alert.tsx
new file mode 100644
index 000000000..909aa1020
--- /dev/null
+++ b/docs-content/react/alert/alert.tsx
@@ -0,0 +1,5 @@
+import { Alert } from "@material-tailwind/react";
+
+export function AlertDefault() {
+ return A simple alert for showing message.;
+}
diff --git a/docs-content/react/alert/index.ts b/docs-content/react/alert/index.ts
new file mode 100644
index 000000000..0de1cfd3a
--- /dev/null
+++ b/docs-content/react/alert/index.ts
@@ -0,0 +1,10 @@
+export * from "./alert";
+export * from "./alert-colors";
+export * from "./alert-custom-animation";
+export * from "./alert-custom-close-icon";
+export * from "./alert-custom-styles";
+export * from "./alert-dismissible";
+export * from "./alert-icon";
+export * from "./alert-variants";
+export * from "./alert-with-content";
+export * from "./alert-with-list";
diff --git a/docs-content/react/avatar/avatar-custom-styles.tsx b/docs-content/react/avatar/avatar-custom-styles.tsx
new file mode 100644
index 000000000..019d0c7ff
--- /dev/null
+++ b/docs-content/react/avatar/avatar-custom-styles.tsx
@@ -0,0 +1,12 @@
+import { Avatar } from "@material-tailwind/react";
+
+export function AvatarCustomStyles() {
+ return (
+
+ );
+}
diff --git a/docs-content/react/avatar/avatar-sizes.tsx b/docs-content/react/avatar/avatar-sizes.tsx
new file mode 100644
index 000000000..1b3570bfd
--- /dev/null
+++ b/docs-content/react/avatar/avatar-sizes.tsx
@@ -0,0 +1,38 @@
+import { Avatar } from "@material-tailwind/react";
+
+export function AvatarSizes() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/docs/avatar-stack.tsx b/docs-content/react/avatar/avatar-stack.tsx
similarity index 97%
rename from components/docs/avatar-stack.tsx
rename to docs-content/react/avatar/avatar-stack.tsx
index cfcfebadb..25489999c 100644
--- a/components/docs/avatar-stack.tsx
+++ b/docs-content/react/avatar/avatar-stack.tsx
@@ -1,6 +1,6 @@
import { Avatar } from "@material-tailwind/react";
-export default function AvatarStack() {
+export function AvatarStack() {
return (
+
+
+
+
+ );
+}
diff --git a/docs-content/react/avatar/avatar-with-border.tsx b/docs-content/react/avatar/avatar-with-border.tsx
new file mode 100644
index 000000000..7aafc6032
--- /dev/null
+++ b/docs-content/react/avatar/avatar-with-border.tsx
@@ -0,0 +1,30 @@
+import { Avatar } from "@material-tailwind/react";
+
+export function AvatarWithBorder() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/avatar/avatar-with-dot-indicator.tsx b/docs-content/react/avatar/avatar-with-dot-indicator.tsx
new file mode 100644
index 000000000..a90a95707
--- /dev/null
+++ b/docs-content/react/avatar/avatar-with-dot-indicator.tsx
@@ -0,0 +1,34 @@
+import { Avatar, Badge } from "@material-tailwind/react";
+
+export function AvatarWithDotIndicator() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/avatar/avatar-with-text.tsx b/docs-content/react/avatar/avatar-with-text.tsx
new file mode 100644
index 000000000..e9d64fe87
--- /dev/null
+++ b/docs-content/react/avatar/avatar-with-text.tsx
@@ -0,0 +1,46 @@
+import { Avatar, Typography } from "@material-tailwind/react";
+
+export function AvatarWithText() {
+ return (
+
+
+
+ );
+}
diff --git a/docs-content/react/card/card.tsx b/docs-content/react/card/card.tsx
new file mode 100644
index 000000000..e40df5a64
--- /dev/null
+++ b/docs-content/react/card/card.tsx
@@ -0,0 +1,34 @@
+import {
+ Card,
+ CardHeader,
+ CardBody,
+ CardFooter,
+ Typography,
+ Button,
+} from "@material-tailwind/react";
+
+export function CardDefault() {
+ return (
+
+
+
+
+
+
+ UI/UX Review Check
+
+
+ The place is close to Barceloneta Beach and bus stop just 2 min by
+ walk and near to "Naviglio" where you can enjoy the main
+ night life in Barcelona.
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/card/ecommerce-card.tsx b/docs-content/react/card/ecommerce-card.tsx
new file mode 100644
index 000000000..4a0c7685a
--- /dev/null
+++ b/docs-content/react/card/ecommerce-card.tsx
@@ -0,0 +1,49 @@
+import {
+ Card,
+ CardHeader,
+ CardBody,
+ CardFooter,
+ Typography,
+ Button,
+} from "@material-tailwind/react";
+
+export function EcommerceCard() {
+ return (
+
+
+
+
+
+
+
+ Apple AirPods
+
+
+ $95.00
+
+
+
+ With plenty of talk and listen time, voice-activated Siri access, and
+ an available wireless charging case.
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/card/horizontal-card.tsx b/docs-content/react/card/horizontal-card.tsx
new file mode 100644
index 000000000..c771a9c69
--- /dev/null
+++ b/docs-content/react/card/horizontal-card.tsx
@@ -0,0 +1,58 @@
+import {
+ Card,
+ CardHeader,
+ CardBody,
+ Typography,
+ Button,
+} from "@material-tailwind/react";
+
+export function HorizontalCard() {
+ return (
+
+
+
+
+
+
+ startups
+
+
+ Lyft launching cross-platform service this week
+
+
+ Like so many organizations these days, Autodesk is a company in
+ transition. It was until recently a traditional boxed software company
+ selling licenses. Yet its own business model disruption is only part
+ of the story
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/card/index.ts b/docs-content/react/card/index.ts
new file mode 100644
index 000000000..c6eaf1db1
--- /dev/null
+++ b/docs-content/react/card/index.ts
@@ -0,0 +1,13 @@
+export * from "./card";
+export * from "./background-blog-card";
+export * from "./blog-card";
+export * from "./booking-card";
+export * from "./card-with-link";
+export * from "./ecommerce-card";
+export * from "./horizontal-card";
+export * from "./login-card";
+export * from "./pricing-card";
+export * from "./profile-card";
+export * from "./simple-card";
+export * from "./testimonial-card";
+export * from "./card-with-list";
diff --git a/docs-content/react/card/login-card.tsx b/docs-content/react/card/login-card.tsx
new file mode 100644
index 000000000..9864a35b6
--- /dev/null
+++ b/docs-content/react/card/login-card.tsx
@@ -0,0 +1,50 @@
+import {
+ Card,
+ CardHeader,
+ CardBody,
+ CardFooter,
+ Typography,
+ Input,
+ Checkbox,
+ Button,
+} from "@material-tailwind/react";
+
+export function LoginCard() {
+ return (
+
+
+
+ Sign In
+
+
+
+
+
+
+
+ The Beauty of Nature
+
+
+ It is not so much for its beauty that the forest makes a claim
+ upon men's hearts, as for that subtle something, that quality
+ of air that emanation from old trees, that so wonderfully changes
+ and renews a weary spirit.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The Beauty of Nature
+
+
+ It is not so much for its beauty that the forest makes a claim
+ upon men's hearts, as for that subtle something, that quality
+ of air that emanation from old trees, that so wonderfully changes
+ and renews a weary spirit.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The Beauty of Nature
+
+
+ It is not so much for its beauty that the forest makes a claim
+ upon men's hearts, as for that subtle something, that quality
+ of air that emanation from old trees, that so wonderfully changes
+ and renews a weary spirit.
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/carousel/carousel.tsx b/docs-content/react/carousel/carousel.tsx
new file mode 100644
index 000000000..a786007b0
--- /dev/null
+++ b/docs-content/react/carousel/carousel.tsx
@@ -0,0 +1,23 @@
+import { Carousel } from "@material-tailwind/react";
+
+export function CarouselDefault() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/carousel/index.ts b/docs-content/react/carousel/index.ts
new file mode 100644
index 000000000..09dd3f2b6
--- /dev/null
+++ b/docs-content/react/carousel/index.ts
@@ -0,0 +1,5 @@
+export * from "./carousel";
+export * from "./carousel-custom-arrows";
+export * from "./carousel-custom-navigation";
+export * from "./carousel-transition";
+export * from "./carousel-with-content";
diff --git a/docs-content/react/checkbox/checkbox-colors.tsx b/docs-content/react/checkbox/checkbox-colors.tsx
new file mode 100644
index 000000000..1b2ffc5a1
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-colors.tsx
@@ -0,0 +1,16 @@
+import { Checkbox } from "@material-tailwind/react";
+
+export function CheckboxColors() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/checkbox/checkbox-custom-icon.tsx b/docs-content/react/checkbox/checkbox-custom-icon.tsx
new file mode 100644
index 000000000..800dcbe62
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-custom-icon.tsx
@@ -0,0 +1,23 @@
+import { Checkbox } from "@material-tailwind/react";
+
+export function CheckboxCustomIcon() {
+ return (
+
+
+
+ }
+ defaultChecked
+ />
+ );
+}
diff --git a/docs-content/react/checkbox/checkbox-custom-styles.tsx b/docs-content/react/checkbox/checkbox-custom-styles.tsx
new file mode 100644
index 000000000..7a2027f73
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-custom-styles.tsx
@@ -0,0 +1,11 @@
+import { Checkbox } from "@material-tailwind/react";
+
+export function CheckboxCustomStyles() {
+ return (
+
+ );
+}
diff --git a/docs-content/react/checkbox/checkbox-horizontal-list-group.tsx b/docs-content/react/checkbox/checkbox-horizontal-list-group.tsx
new file mode 100644
index 000000000..f184e44ac
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-horizontal-list-group.tsx
@@ -0,0 +1,77 @@
+import {
+ Checkbox,
+ Card,
+ List,
+ ListItem,
+ ListItemPrefix,
+ Typography,
+} from "@material-tailwind/react";
+
+export function CheckboxHorizontalListGroup() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/checkbox/checkbox-label.tsx b/docs-content/react/checkbox/checkbox-label.tsx
new file mode 100644
index 000000000..cc367a21b
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-label.tsx
@@ -0,0 +1,5 @@
+import { Checkbox } from "@material-tailwind/react";
+
+export function CheckboxLabel() {
+ return ;
+}
diff --git a/docs-content/react/checkbox/checkbox-ripple-effect.tsx b/docs-content/react/checkbox/checkbox-ripple-effect.tsx
new file mode 100644
index 000000000..0ce3769d7
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-ripple-effect.tsx
@@ -0,0 +1,10 @@
+import { Checkbox } from "@material-tailwind/react";
+
+export function CheckboxRippleEffect() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/docs-content/react/checkbox/checkbox-vertical-list-group.tsx b/docs-content/react/checkbox/checkbox-vertical-list-group.tsx
new file mode 100644
index 000000000..2f1562212
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-vertical-list-group.tsx
@@ -0,0 +1,77 @@
+import {
+ Checkbox,
+ Card,
+ List,
+ ListItem,
+ ListItemPrefix,
+ Typography,
+} from "@material-tailwind/react";
+
+export function CheckboxVerticalListGroup() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs-content/react/checkbox/checkbox-with-description.tsx b/docs-content/react/checkbox/checkbox-with-description.tsx
new file mode 100644
index 000000000..8f2a84496
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-with-description.tsx
@@ -0,0 +1,21 @@
+import { Checkbox, Typography } from "@material-tailwind/react";
+
+export function CheckboxWithDescription() {
+ return (
+
+
+ Remember Me
+
+
+ You'll be able to login without password for 24 hours.
+
+
+ }
+ containerProps={{
+ className: "-mt-5",
+ }}
+ />
+ );
+}
diff --git a/docs-content/react/checkbox/checkbox-with-link.tsx b/docs-content/react/checkbox/checkbox-with-link.tsx
new file mode 100644
index 000000000..0e2b3e170
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox-with-link.tsx
@@ -0,0 +1,22 @@
+import { Checkbox, Typography } from "@material-tailwind/react";
+
+export function CheckboxWithLink() {
+ return (
+
+ I agree with the
+
+ terms and conditions
+
+ .
+
+ }
+ />
+ );
+}
diff --git a/docs-content/react/checkbox/checkbox.tsx b/docs-content/react/checkbox/checkbox.tsx
new file mode 100644
index 000000000..f34347252
--- /dev/null
+++ b/docs-content/react/checkbox/checkbox.tsx
@@ -0,0 +1,5 @@
+import { Checkbox } from "@material-tailwind/react";
+
+export function CheckboxDefault() {
+ return ;
+}
diff --git a/docs-content/react/checkbox/disabled-checkbox.tsx b/docs-content/react/checkbox/disabled-checkbox.tsx
new file mode 100644
index 000000000..2b5056143
--- /dev/null
+++ b/docs-content/react/checkbox/disabled-checkbox.tsx
@@ -0,0 +1,5 @@
+import { Checkbox } from "@material-tailwind/react";
+
+export function DisabledCheckbox() {
+ return ;
+}
diff --git a/docs-content/react/checkbox/index.ts b/docs-content/react/checkbox/index.ts
new file mode 100644
index 000000000..ecdc43999
--- /dev/null
+++ b/docs-content/react/checkbox/index.ts
@@ -0,0 +1,11 @@
+export * from "./checkbox";
+export * from "./checkbox-colors";
+export * from "./checkbox-custom-icon";
+export * from "./checkbox-custom-styles";
+export * from "./checkbox-horizontal-list-group";
+export * from "./checkbox-label";
+export * from "./checkbox-ripple-effect";
+export * from "./checkbox-vertical-list-group";
+export * from "./checkbox-with-description";
+export * from "./checkbox-with-link";
+export * from "./disabled-checkbox";
diff --git a/docs-content/react/chip/chip-colors.tsx b/docs-content/react/chip/chip-colors.tsx
new file mode 100644
index 000000000..0bae50d87
--- /dev/null
+++ b/docs-content/react/chip/chip-colors.tsx
@@ -0,0 +1,17 @@
+import { Chip } from "@material-tailwind/react";
+
+export function ChipColors() {
+ return (
+
+ 
- 
+ 
- 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+