Avatar
An image with an accessible fallback for a person or entity.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
"use client";
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@moe-ui/registry/components/ui/avatar";
import { Text } from "@moe-ui/registry/components/ui/text";
export const AvatarPreview = () => {
return (
<Avatar alt="shadcn profile">
<AvatarImage source={{ uri: "/media/avatar.svg" }} />
<AvatarFallback>
<Text>CN</Text>
</AvatarFallback>
</Avatar>
);
};
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add avatarUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Avatar } from "@/components/ui/avatar";Variants and composition
Each additional variant has its own live preview and testable section.
Fallback
"use client";
import { Avatar, AvatarFallback } from "@moe-ui/registry/components/ui/avatar";
import { Text } from "@moe-ui/registry/components/ui/text";
export const AvatarFallbackExamplePreview = () => {
return (
<Avatar alt="JD avatar" className="size-10">
<AvatarFallback>
<Text>JD</Text>
</AvatarFallback>
</Avatar>
);
};
Sizes
"use client";
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@moe-ui/registry/components/ui/avatar";
import { Text } from "@moe-ui/registry/components/ui/text";
import { View } from "react-native";
export const AvatarSizesExamplePreview = () => {
return (
<View className="flex-row items-center gap-4">
<Avatar alt="Small profile avatar" className="size-8">
<AvatarImage source={{ uri: "/media/avatar.svg" }} />
<AvatarFallback>
<Text>CN</Text>
</AvatarFallback>
</Avatar>
<Avatar alt="Medium profile avatar" className="size-10">
<AvatarImage source={{ uri: "/media/avatar.svg" }} />
<AvatarFallback>
<Text>CN</Text>
</AvatarFallback>
</Avatar>
<Avatar alt="Large profile avatar" className="size-14">
<AvatarImage source={{ uri: "/media/avatar.svg" }} />
<AvatarFallback>
<Text>CN</Text>
</AvatarFallback>
</Avatar>
</View>
);
};
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Provide meaningful alternative text for informative media and an empty alternative for decorative media.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports3 exports
AvatarAvatarFallbackAvatarImage"use client";
import { cn } from "../../lib/utils";
import * as AvatarPrimitive from "@rn-primitives/avatar";
function Avatar({
className,
...props
}: AvatarPrimitive.RootProps & React.RefAttributes<AvatarPrimitive.RootRef>) {
return (
<AvatarPrimitive.Root
className={cn(
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
className,
)}
{...props}
/>
);
}
function AvatarImage({
className,
...props
}: AvatarPrimitive.ImageProps & React.RefAttributes<AvatarPrimitive.ImageRef>) {
return (
<AvatarPrimitive.Image
className={cn("aspect-square size-full", className)}
{...props}
/>
);
}
function AvatarFallback({
className,
...props
}: AvatarPrimitive.FallbackProps &
React.RefAttributes<AvatarPrimitive.FallbackRef>) {
return (
<AvatarPrimitive.Fallback
className={cn(
"bg-muted flex size-full flex-row items-center justify-center rounded-full",
className,
)}
{...props}
/>
);
}
export { Avatar, AvatarFallback, AvatarImage };