Loading...
Getting Started
Avatar List
+3
Displays a user representation using an image, initials, or icon with optional online status and grouped presentation.
"use client"
import { Avatar, AvatarList } from '@/registry/basic-ui/avatar';
const STACKED_AVATARS = [
{
src: 'https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?auto=format&fit=facearea&w=160&h=160&q=80',
alt: 'Ada Lovelace',
online: true,
},
{
src: 'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=facearea&w=160&h=160&q=80',
alt: 'Linus Torvalds',
},
{
src: 'https://picsum.photos/160/160?random=1',
alt: 'Random Image',
},
{
src: 'https://picsum.photos/160/160?random=2',
alt: 'Random Image',
},
{
src: 'https://picsum.photos/160/160?random=3',
alt: 'Random Image',
},
{
text: 'BU',
},
{
text: 'DS',
online: true,
},
{
text: 'MJ',
},
];
export default function AvatarDefault() {
return (
<div className="flex flex-col gap-(--gap-6)">
<div className="flex flex-wrap items-center gap-(--gap-4)">
<Avatar
size="3xl"
src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=facearea&w=160&h=160&q=80"
alt="Taylor Jensen"
online
/>
<Avatar size="3xl" text="BU" />
<Avatar size="3xl" />
</div>
<div className="flex flex-wrap items-center gap-(--gap-4)">
<Avatar size="m" text="UX" online />
<Avatar size="m" />
</div>
<div className="flex flex-col gap-(--gap-2)">
<p className="text-[length:--font-size/body/16] font-medium text-(--grey-text-alpha-2)">
Avatar List
</p>
<AvatarList
size="xl"
items={STACKED_AVATARS}
max={5}
aria-label="Team members"
/>
</div>
</div>
);
}Avatar| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
src | string | – | Yes | Image source for the avatar. |
alt | string | – | Yes | Accessible label for the avatar image. |
text | string | – | No | Text rendered when no image is provided. |
icon | ReactNode | – | No | Custom icon rendered when no image or fallback text is provided. |
size | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "xl" | No | No |
online | boolean | false | No | Displays the online status indicator. |
AvatarList| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
items | AvatarListItem[] | – | Yes | Collection of avatars to render. |
max | number | items.length | No | Maximum avatars to display before collapsing into a counter. |
size | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "xl" | No | Shared size for all avatars in the list. |
aria-label | string | – | No | Accessible label describing the avatar list contents. |
Avatar List
'use client';
import { Avatar, AvatarList } from '@/registry/basic-ui/avatar';
const STACKED_AVATARS = [
{
src: 'https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?auto=format&fit=facearea&w=160&h=160&q=80',
alt: 'Ada Lovelace',
online: true,
},
{
src: 'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=facearea&w=160&h=160&q=80',
alt: 'Linus Torvalds',
},
{
src: 'https://picsum.photos/160/160?random=1',
alt: 'Random Image',
},
{
src: 'https://picsum.photos/160/160?random=2',
alt: 'Random Image',
},
{
src: 'https://picsum.photos/160/160?random=3',
alt: 'Random Image',
},
{
text: 'BU',
},
{
text: 'DS',
online: true,
},
{
text: 'MJ',
},
];
export function AvatarDefault() {
return (
<div className="flex flex-col gap-(--gap-6)">
<div className="flex flex-wrap items-center gap-(--gap-4)">
<Avatar
size="3xl"
src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=facearea&w=160&h=160&q=80"
alt="Taylor Jensen"
online
/>
<Avatar size="3xl" text="BU" />
<Avatar size="3xl" />
</div>
<div className="flex flex-wrap items-center gap-(--gap-4)">
<Avatar size="m" text="UX" online />
<Avatar size="m" />
</div>
<div className="flex flex-col gap-(--gap-2)">
<p className="text-[length:--font-size/body/16] font-medium text-(--grey-text-alpha-2)">
Avatar List
</p>
<AvatarList
size="xl"
items={STACKED_AVATARS}
max={5}
aria-label="Team members"
/>
</div>
</div>
);
}
'use client';
import { Avatar } from '@/registry/basic-ui/avatar';
export function AvatarSize() {
const sizes: Array<
'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
> = ['5xl', '4xl', '3xl', '2xl', 'xl', 'l', 'm', 's', 'xs'];
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Text Avatar Sizes */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-[length:--font-size/body/16] font-medium text-(--grey-text-alpha-1-default)">
Text Avatar Sizes
</h3>
<div className="flex flex-wrap items-end gap-(--gap-4)">
{sizes.map((size) => (
<div
key={size}
className="flex flex-col items-center gap-(--gap-2)"
>
<Avatar size={size} text="BU" />
</div>
))}
</div>
</div>
{/* Text Avatar with Online Indicator */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-[length:--font-size/body/16] font-medium text-(--grey-text-alpha-1-default)">
Text Avatar with Online Status
</h3>
<div className="flex flex-wrap items-end gap-(--gap-4)">
{sizes.map((size) => (
<div
key={size}
className="flex flex-col items-center gap-(--gap-2)"
>
<Avatar size={size} text="BU" online />
<span className="text-[length:--font-size/body/12] text-(--grey-text-alpha-3-hover)">
{size}
</span>
</div>
))}
</div>
</div>
{/* Icon Avatar Sizes */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-[length:--font-size/body/16] font-medium text-(--grey-text-alpha-1-default)">
Icon Avatar Sizes
</h3>
<div className="flex flex-wrap items-end gap-(--gap-4)">
{sizes.map((size) => (
<div
key={size}
className="flex flex-col items-center gap-(--gap-2)"
>
<Avatar size={size} />
</div>
))}
</div>
</div>
{/* Icon Avatar with Online Indicator */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-[length:--font-size/body/16] font-medium text-(--grey-text-alpha-1-default)">
Icon Avatar with Online Status
</h3>
<div className="flex flex-wrap items-end gap-(--gap-4)">
{sizes.map((size) => (
<div
key={size}
className="flex flex-col items-center gap-(--gap-2)"
>
<Avatar size={size} online />
<span className="text-[length:--font-size/body/12] text-(--grey-text-alpha-3-hover)">
{size}
</span>
</div>
))}
</div>
</div>
{/* Image Avatar Sizes */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-[length:--font-size/body/16] font-medium text-(--grey-text-alpha-1-default)">
Image Avatar Sizes
</h3>
<div className="flex flex-wrap items-end gap-(--gap-4)">
{sizes.map((size) => (
<div
key={size}
className="flex flex-col items-center gap-(--gap-2)"
>
<Avatar
size={size}
src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=facearea&w=160&h=160&q=80"
alt="Avatar"
/>
</div>
))}
</div>
</div>
{/* Image Avatar with Online Indicator */}
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-[length:--font-size/body/16] font-medium text-(--grey-text-alpha-1-default)">
Image Avatar with Online Status
</h3>
<div className="flex flex-wrap items-end gap-(--gap-4)">
{sizes.map((size) => (
<div
key={size}
className="flex flex-col items-center gap-(--gap-2)"
>
<Avatar
size={size}
src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=facearea&w=160&h=160&q=80"
alt="Avatar"
online
/>
<span className="text-[length:--font-size/body/12] text-(--grey-text-alpha-3-hover)">
{size}
</span>
</div>
))}
</div>
</div>
</div>
);
}