Avatar
An identity represented by initials or an image.
Upstream documentationExamples
NAUIFE
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Avatar
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/avatar.json'Usage
A complete example using the installed component and hook paths.
Avatar usage
"use client";import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";const AvatarPreview = function AvatarPreview() { return ( <AvatarGroup> <Avatar> <AvatarFallback>NA</AvatarFallback> </Avatar> <Avatar> <AvatarFallback>UI</AvatarFallback> </Avatar> <Avatar> <AvatarFallback>FE</AvatarFallback> </Avatar> </AvatarGroup> ); };export default function Demo() { return <AvatarPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Avatar
Avatar props
AvatarPrimitive.Root.Props & { size?: "default" | "sm" | "lg";}- size
- "default"
AvatarImage
AvatarImage props
AvatarPrimitive.Image.PropsAvatarFallback
AvatarFallback props
AvatarPrimitive.Fallback.PropsAvatarGroup
AvatarGroup props
React.ComponentProps<"div">AvatarGroupCount
AvatarGroupCount props
React.ComponentProps<"div">AvatarBadge
AvatarBadge props
React.ComponentProps<"span">