Components

Avatar

An image element with a fallback for representing the user.

Installation

pnpm dlx shadcn@latest add https://reui.io/r/avatar.json

This component builds on the Radix UI Avatar primitives, adding customization options such as indicators and status.

This component is based on the Avatar.Root primitive.

Prop	Type	Default
`className`	~~string~~

This component is based on the Avatar.Image primitive.

Prop	Type	Default
`className`	~~string~~

This component is based on the Avatar.Fallback primitive.

Prop	Type	Default
`className`	~~string~~

This is a custom component used to display an indicator within the avatar.

Prop	Type	Default
`className`	~~string~~

This is a custom component for displaying a status indicator on the avatar.

Prop	Type	Default
`variant`	~~enum~~	`online`
`className`	~~string~~

On This Page