Components
Loading preview...
An easily stylable avatar component built with Base UI components.
npx shadcn@latest add https://21st.dev/r/sean0205/base-avatar-1import { Avatar, AvatarFallback } from '@/components/ui/base-avatar';
import { User } from 'lucide-react';
export default function Component() {
return (
<div className="flex gap-6">
<Avatar>
<AvatarFallback>CH</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback className="text-destructive bg-destructive/10">AJ</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback className="text-primary bg-primary/10">
<User className="size-4" />
</AvatarFallback>
</Avatar>
</div>
);
}