Avatar
Brand avatar used as a logo across the site. Two variants: photo with a profile image and rotating accent-gradient border, and icon with an animated accent-gradient orb.
Variants
Icon
tsx
<Avatar variant="photo" />
<Avatar variant="icon" />Sizes
32px
40px (default)
48px
tsx
{/* Override size via className */}
<Avatar variant="photo" className="h-8 w-8 rounded-[8px]" />
<Avatar variant="photo" /> {/* 40px default */}
<Avatar variant="photo" className="h-12 w-12 rounded-[12px]" /> {/* 48px */}Use Cases
Photo
Gabriel Hidalgo
UX/UI Designer
Icon
Gabriel Hidalgo
UX/UI Designer
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "photo" | "icon" | "photo" | Photo shows the profile image with a rotating accent-gradient border. Icon shows an animated accent-gradient orb inside a dark container. |
className | string | - | Additional classes merged onto the outer container. Use to override size (e.g. h-8 w-8) or add hover effects. |
Import
tsx
import { Avatar } from '@/components/ui/Avatar'