Forms
Navigation & layout
Data display & feedback
Date & time
Browse components
← All components
Avatar
User avatar. Pass `seed` for a generated Oreo face, or compose Image + Fallback.
Install
npx shadcn@latest add https://ui.anuragroy.dev/r/avatar.jsonPreview
Loading preview…
Installation
Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.
Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/avatar.jsonGitHub fallback if the website is down:
Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/avatar.jsonUsage
Import paths follow your components.json aliases. After install, the default path is @/components/ui/avatar.
Import
import { Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"example.tsx
import { Avatar } from "@/components/ui/avatar"export function Example() { return <Avatar seed="Ada Lovelace" size={40} title="Ada Lovelace" />}API Reference
Avatar
Without children, generates an Oreo avatar from `seed`. With children, acts as a Base UI Avatar root.
| Prop | Type | Default |
|---|---|---|
| seed | string | — |
| palette | string | — |
| variantId | string | — |
| tone | AvatarOptions['tone'] | — |
| appearance | "light" | "dark" | — |
| drift | number | — |
| size | number | 40 |
| title | string | — |
- seed — Drives palette and variant.
- palette — Oreo palette name, e.g. `rose-milk`.
- variantId — Locks a specific Oreo face when not using `seed`.
- tone — Oreo tone override.
- appearance — Defaults to the active theme from `next-themes`.
- drift — Palette drift. Seeded avatars default to `8`.
- title — Accessible name for the generated SVG.
Notes
- Generated avatars use `@oreo-design/avatar` and follow the active light/dark theme.