Components
<UserAvatar />
The <UserAvatar /> component renders a user's avatar image based on the provided user object. If the user does not have an avatar image, a fallback with the first 2 letters of their name or email will be displayed.
Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.jsonUsage
import { UserAvatar } from "@/components/auth/user-avatar";
export default function Example() {
const user = {
name: "Seto",
email: "seto@better-auth.dev",
image: "https://better-auth-ui.com/avatars/seto.png",
};
return <UserAvatar user={user} />;
}Reference
The following props can be passed to the <UserAvatar /> component:
| Prop | Type | Default |
|---|---|---|
localization? | AuthLocalization | authLocalization |
user? | Profile | null | - |
size? | "sm" | "default" | "lg" | "xl" | null | - |
isPending? | boolean | - |
classNames? | UserAvatarClassNames | - |
Example
Here is a practical example demonstrating customized styles and fallback customization:
import { UserAvatar } from "@/components/auth/user-avatar";
export default function Example() {
const user = {
name: "Seto",
email: "seto@better-auth.dev",
image: "https://better-auth-ui.com/avatars/seto.png",
};
return (
<UserAvatar
user={user}
className="size-12 border-2 border-destructive"
classNames={{
fallback: "bg-black text-white",
}}
/>
);
}