Components
Loading preview...
Here is Avatar component
@SubframeApp
npx shadcn@latest add https://21st.dev/r/SubframeApp/avatar-2// Mixed avatars (image + text)
import Component from "@/components/ui/avatar-2";
export default function AvatarMixed() {
return (
<div className="flex items-center gap-4">
<Component
size="x-large"
variant="neutral"
square
image="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=400&auto=format&fit=crop"
/>
<Component
size="medium"
variant="warning"
image="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=400&auto=format&fit=crop"
/>
</div>
);
}