diff --git a/docs-content/html/accordion/index.ts b/docs-content/html/accordion/index.ts
index 11713e533..a9057f1f1 100644
--- a/docs-content/html/accordion/index.ts
+++ b/docs-content/html/accordion/index.ts
@@ -1,3 +1,4 @@
export * from "./accordion";
export * from "./accordion-custom-icon";
export * from "./accordion-disabled";
+export * from "./nested-accordion";
diff --git a/docs-content/html/accordion/nested-accordion.tsx b/docs-content/html/accordion/nested-accordion.tsx
new file mode 100644
index 000000000..128a90256
--- /dev/null
+++ b/docs-content/html/accordion/nested-accordion.tsx
@@ -0,0 +1,98 @@
+export function NestedAccordion() {
+ return (
+ <>
+
+
+
+
+
+
+ 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/react/accordion/index.ts b/docs-content/react/accordion/index.ts
index 851f064e5..05d4b87b8 100644
--- a/docs-content/react/accordion/index.ts
+++ b/docs-content/react/accordion/index.ts
@@ -5,3 +5,4 @@ export * from "./accordion-custom-animation";
export * from "./accordion-custom-icon";
export * from "./accordion-custom-styles";
export * from "./accordion-disabled";
+export * from "./nested-accordion";
diff --git a/docs-content/react/accordion/nested-accordion.tsx b/docs-content/react/accordion/nested-accordion.tsx
new file mode 100644
index 000000000..0eea4b53b
--- /dev/null
+++ b/docs-content/react/accordion/nested-accordion.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+} from "@material-tailwind/react";
+
+export function NestedAccordion() {
+ const [open, setOpen] = React.useState(1);
+ const [openNest, setOpenNest] = React.useState(0);
+
+ const handleOpen = (value) => setOpen(open === value ? 0 : value);
+ const handleOpenNest = (value) => setOpenNest(openNest === 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.
+ {/* Nested Accordions */}
+
+ handleOpenNest(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.
+
+
+
+ handleOpenNest(2)}>
+ 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/avatar/avatar-with-dot-indicator.tsx b/docs-content/react/avatar/avatar-with-dot-indicator.tsx
new file mode 100644
index 000000000..5bc5e74f1
--- /dev/null
+++ b/docs-content/react/avatar/avatar-with-dot-indicator.tsx
@@ -0,0 +1,39 @@
+import { Avatar } from "@material-tailwind/react";
+
+export function AvatarWithDotIndicator() {
+ return (
+
+ ))}
+
+
+ );
+}
diff --git a/docs-content/react/card/index.ts b/docs-content/react/card/index.ts
index 052e94ca9..c6eaf1db1 100644
--- a/docs-content/react/card/index.ts
+++ b/docs-content/react/card/index.ts
@@ -10,3 +10,4 @@ export * from "./pricing-card";
export * from "./profile-card";
export * from "./simple-card";
export * from "./testimonial-card";
+export * from "./card-with-list";
diff --git a/documentation/html/accordion.mdx b/documentation/html/accordion.mdx
index 9aed37ae3..513ece44f 100644
--- a/documentation/html/accordion.mdx
+++ b/documentation/html/accordion.mdx
@@ -6,6 +6,7 @@ navigation:
"accordion",
"custom-accordion-icon",
"disabled-accordion",
+ "nested-accordion",
"accordion-trigger-data-attributes",
"accordion-data-attributes",
"required-script",
@@ -273,6 +274,125 @@ The example is a type of accordion which indicates that certain sections of cont
Use this Tailwind CSS accordion to maintain a clean layout while signaling to users that some information or options are not available for interaction at the moment (eg. content is released in stages, or user actions are required to unlock certain functionalities).
+
+---
+
+## Nested Accordion
+
+The example is a type of nested accordion.
+
+}
+>
+```html
+ export function NestedAccordion() {
+ return (
+ <>
+
+
+
+
+
+
+ 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.
+
+
+
+
+ );
+}
+
+```
+
+
+
+
+
---
## Material Tailwind Accordion Specifications
diff --git a/documentation/react/accordion.mdx b/documentation/react/accordion.mdx
index 83daeb36a..bca94c74c 100644
--- a/documentation/react/accordion.mdx
+++ b/documentation/react/accordion.mdx
@@ -11,6 +11,7 @@ navigation:
"accordion-custom-animation",
"accordion-custom-styles",
"accordion-disabled",
+ "nested-accordion",
"accordion-props",
"accordion-header-props",
"accordion-body-props",
@@ -495,6 +496,95 @@ export function AccordionDisabled() {
In the example above, the first accordion (open === 1) is set to be disabled by passing the disabled prop. This means that this section will not be interactive and cannot be opened or closed by the user.
+---
+
+
+## Accordion Nesting
+
+
+An Accordion can be nested as well
+
+}>
+```jsx
+import React from "react";
+import {
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+} from "@material-tailwind/react";
+
+export function NestedAccordion() {
+ const [open, setOpen] = React.useState(1);
+ const [openNest, setOpenNest] = React.useState(0);
+
+ const handleOpen = (value) => setOpen(open === value ? 0 : value);
+ const handleOpenNest = (value) => setOpenNest(openNest === 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.
+ {/* Nested Accordions */}
+
+ handleOpenNest(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.
+
+
+
+ handleOpenNest(2)}>
+ 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/documentation/react/avatar.mdx b/documentation/react/avatar.mdx
index 6d68ddf49..28dc3cb72 100644
--- a/documentation/react/avatar.mdx
+++ b/documentation/react/avatar.mdx
@@ -9,7 +9,10 @@ navigation:
"avatar-with-border",
"avatar-with-text",
"avatar-stack",
+ "avatar-with-dot-indicator",
+ avatar-with-user-dropdown,
"avatar-custom-styles",
+
"avatar-props",
"types-variant",
"types-size",
@@ -261,6 +264,165 @@ export function AvatarStack() {
---
+
+## Avatar with Dot Indicator
+
+
+}>
+```jsx
+import { Avatar } from "@material-tailwind/react";
+
+export function AvatarWithDotIndicator() {
+ return (
+