Avatar
Profile images, resilient initials, presence, verification, account menus and collaborator groups.
The existing Avatar API and curated patterns share the same image and fallback primitives.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/avatar-account-menu.json.
Usage
Playground
Examples
Account dropdown menu
Rings and activity
Empty state
Groups
Hover groups with tooltips
Inside buttons
Sizes, shapes and fallbacks
Social proof
Status and icon badges
User details and badge
API
15 props
Accessibility
A named Avatar exposes one image label, including host-provided presence. Use alt="" beside visible identity text. Wrap interactive avatars in Button, Tooltip or DropdownMenu; status badges never infer presence from image loading.
Related
ProfileAccount and organisation pages for an application: profile details, organisation members and permissions, billing and usage, referrals, and connected mailboxes.5 examplesButtonButton renders the Gaudi action and link-button variants.7 examplesTooltipBrief contextual help attached to an independently labelled control.4 examplesDropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesImageImage renders editorial MDX images with caption, dark-mode source, fallback source, and click-to-open modal behavior.CardCard frames reusable content with title, subtitle, and optional children.8 examples