Components
AvatarGroup
An overlapping group of avatars with an overflow count.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: avatarGroup,avatarOverflow.
| Prop | Type | Default | Description |
|---|---|---|---|
avatars | AvatarItem[] | [] | See usage notes and the component API. |
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
max | number | 4 | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import AvatarGroup from sveltewind/components. This example shows its default styling in a usable context.
Loading...Use avatars for automatic overflow handling, or children to compose the group yourself.
Examples
Theme variants
Every variant available for AvatarGroup in the built-in themes is shown below.
spaced — Apply the spaced variant.
Loading...compact — Apply the compact variant.
Loading...spacious — Apply the spacious variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change max while retaining the default component styling.
Loading...Content and values
Provide different avatars values.
Loading...