Avatar
A picture of someone at the button's heights, with initials standing in until it loads or when it can't.
01Preview
01APAPAPAP
LN
Initials stand in when there is no picture or it fails to load.
02Installation
npx shadcn@latest add https://aiellie.app/r/avatar.json03API reference
03From the Base UI documentation
Displays a user's profile picture, initials, or fallback icon. Renders a <span> element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ((state: Avatar.Root.State) => string | undefined) | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
| style | React.CSSProperties | ((state: Avatar.Root.State) => React.CSSProperties | undefined) | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement | ((props: HTMLProps, state: Avatar.Root.State) => ReactElement) | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |