diff --git a/docs/components/avatar/avatar.md b/docs/components/avatar/avatar.md
index 2ef1033..1294e57 100644
--- a/docs/components/avatar/avatar.md
+++ b/docs/components/avatar/avatar.md
@@ -4,6 +4,9 @@ import AvatarBorderedExample from './examples/AvatarBorderedExample.vue'
import AvatarDotIndicatorExample from './examples/AvatarDotIndicatorExample.vue'
import AvatarSizeExample from './examples/AvatarSizeExample.vue'
import AvatarDotIndicatorPositionExample from './examples/AvatarDotIndicatorPositionExample.vue'
+import AvatarAlternativeTextExample from './examples/AvatarAlternativeTextExample.vue'
+import StackedAvatarsExample from './examples/StackedAvatarsExample.vue'
+
# Avatar
Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
@@ -100,3 +103,33 @@ import { Avatar } from 'flowbite-vue'
```
+## Alternative text
+
+
+
+## Stacked avatars
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/docs/components/avatar/examples/AvatarAlternativeTextExample.vue b/docs/components/avatar/examples/AvatarAlternativeTextExample.vue
new file mode 100644
index 0000000..3b32d2a
--- /dev/null
+++ b/docs/components/avatar/examples/AvatarAlternativeTextExample.vue
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/docs/components/avatar/examples/StackedAvatarsExample.vue b/docs/components/avatar/examples/StackedAvatarsExample.vue
new file mode 100644
index 0000000..60f25f6
--- /dev/null
+++ b/docs/components/avatar/examples/StackedAvatarsExample.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Avatar/StackedAvatars.vue b/src/components/Avatar/StackedAvatars.vue
new file mode 100644
index 0000000..ef4c830
--- /dev/null
+++ b/src/components/Avatar/StackedAvatars.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/components/Avatar/StackedAvatarsCounter.vue b/src/components/Avatar/StackedAvatarsCounter.vue
new file mode 100644
index 0000000..521b367
--- /dev/null
+++ b/src/components/Avatar/StackedAvatarsCounter.vue
@@ -0,0 +1,15 @@
+
+ +{{ total }}
+
+
diff --git a/src/components/Avatar/composables/useAvatarClasses.ts b/src/components/Avatar/composables/useAvatarClasses.ts
index 6766ab6..c172c37 100644
--- a/src/components/Avatar/composables/useAvatarClasses.ts
+++ b/src/components/Avatar/composables/useAvatarClasses.ts
@@ -56,6 +56,7 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
avatarSizeClasses[props.size.value],
avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
props.bordered.value ? avatarBorderedClasses : '',
+ props.stacked.value ? 'border-2 border-white dark:border-gray-800' : '',
)
})
const avatarDotClasses = computed(() => {
@@ -67,7 +68,6 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
)
})
// TODO: Placeholder
- // TODO: Stacked avatars
// TODO: Avatar Initials
return {
diff --git a/src/index.ts b/src/index.ts
index 64d1910..34a6643 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,9 +7,11 @@ export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
-
-export { default as Accordion } from './components/Accordion/Accordion.vue'
export { default as Avatar } from './components/Avatar/Avatar.vue'
+export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue'
+export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue'
+export { default as Accordion } from './components/Accordion/Accordion.vue'
+
export { default as Badge } from './components/Badge/Badge.vue'
export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue'
export { default as Card } from './components/Card/Card.vue'