Avatar

Avatar is an image that represents a user or organization.

@radix-ui/react-slot

class-variance-authority

lucide-react

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarDemo() {
8    return (
9        <Avatar>
10            <AvatarImage src="/images/profile1.png" />
11            <AvatarFallback>Sb</AvatarFallback>
12        </Avatar>
13    )
14}
15

Installation

Install the following dependencies:

npx shadcn@latest add https://sbthemes.com/r/avatar.json

Examples

Variants

SbSb

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarVariant() {
8    return (
9        <div className="flex items-center gap-5">
10            <Avatar variant={'default'}>
11                <AvatarImage src="/images/profile1.png" />
12                <AvatarFallback>Sb</AvatarFallback>
13            </Avatar>
14            <Avatar variant={'outline'}>
15                <AvatarImage src="/images/profile2.png" />
16                <AvatarFallback>Sb</AvatarFallback>
17            </Avatar>
18        </div>
19    )
20}
21

Size

SbSbSbSbSb

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarSize() {
8    return (
9        <div className="flex items-center justify-center gap-3 sm:gap-5">
10            <Avatar size={'xl'}>
11                <AvatarImage src="/images/profile1.png" />
12                <AvatarFallback>Sb</AvatarFallback>
13            </Avatar>
14            <Avatar size={'lg'}>
15                <AvatarImage src="/images/profile2.png" />
16                <AvatarFallback>Sb</AvatarFallback>
17            </Avatar>
18            <Avatar size={'md'}>
19                <AvatarImage src="/images/profile3.png" />
20                <AvatarFallback>Sb</AvatarFallback>
21            </Avatar>
22            <Avatar size={'sm'}>
23                <AvatarImage src="/images/profile4.png" />
24                <AvatarFallback>Sb</AvatarFallback>
25            </Avatar>
26            <Avatar size={'xs'}>
27                <AvatarImage src="/images/profile5.png" />
28                <AvatarFallback>Sb</AvatarFallback>
29            </Avatar>
30        </div>
31    )
32}
33

Radius

SbSbSbSbSb

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarRadius() {
8    return (
9        <div className="flex items-center justify-center gap-3 sm:gap-5">
10            <Avatar radius={'default'}>
11                <AvatarImage src="/images/profile1.png" />
12                <AvatarFallback>Sb</AvatarFallback>
13            </Avatar>
14            <Avatar radius={'xl'}>
15                <AvatarImage src="/images/profile2.png" />
16                <AvatarFallback>Sb</AvatarFallback>
17            </Avatar>
18            <Avatar radius={'lg'}>
19                <AvatarImage src="/images/profile3.png" />
20                <AvatarFallback>Sb</AvatarFallback>
21            </Avatar>
22            <Avatar radius={'md'}>
23                <AvatarImage src="/images/profile4.png" />
24                <AvatarFallback>Sb</AvatarFallback>
25            </Avatar>
26            <Avatar radius={'none'}>
27                <AvatarImage src="/images/profile5.png" />
28                <AvatarFallback>Sb</AvatarFallback>
29            </Avatar>
30        </div>
31    )
32}
33

Avatar Group

SbSbSbSb+12

1import {
2    Avatar,
3    AvatarFallback,
4    AvatarImage,
5} from '@/components/ui/avatar'
6
7export function AvatarGroup() {
8    return (
9        <div className="flex items-center justify-center -space-x-3">
10            <Avatar variant={'outline'}>
11                <AvatarImage src="/images/profile1.png" />
12                <AvatarFallback>Sb</AvatarFallback>
13            </Avatar>
14            <Avatar variant={'outline'}>
15                <AvatarImage src="/images/profile2.png" />
16                <AvatarFallback>Sb</AvatarFallback>
17            </Avatar>
18            <Avatar variant={'outline'}>
19                <AvatarImage src="/images/profile3.png" />
20                <AvatarFallback>Sb</AvatarFallback>
21            </Avatar>
22            <Avatar variant={'outline'}>
23                <AvatarImage src="/images/profile4.png" />
24                <AvatarFallback>Sb</AvatarFallback>
25            </Avatar>
26            <Avatar variant={'outline'}>
27                <AvatarFallback>+12</AvatarFallback>
28            </Avatar>
29        </div>
30    )
31}
32

API Reference

The main wrapper for the avatar component. This component is based on the <div> element and supports all of its props and adds:

Prop	Type	Default
variant	`default` ,`outline`	default
size	`xs`, `sm`, `md`, `lg`, `xl`	xl
radius	`default`, `md`, `lg`, `xl`,`none`	default

On This Page