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 (default)
40px (lg)
tsx
<Avatar variant="photo" /> {/* 32px default */}
<Avatar variant="photo" size="lg" /> {/* 40px */}Shapes
The circle is what the header wears once the nav has morphed into its floating pill — there it's animated by a clipping wrapper rather than this prop, since a class swap can't be sprung.
circle, lg
tsx
<Avatar variant="photo" />
<Avatar variant="photo" shape="circle" />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. |
size | "default" | "lg" | "default" | "default" renders at 32×32 with rounded-sm. "lg" renders at 40×40 with a slightly larger radius. |
shape | "rounded" | "circle" | "rounded" | Corner treatment. "rounded" uses the radius that comes with the size; "circle" overrides it to a full circle. The header animates between the two with a clipping wrapper as the nav morphs into its floating pill. |
className | string | - | Additional classes merged onto the outer container — for one-off tweaks (hover effects, etc.). Do not override size here; use the size prop. |
Import
tsx
import { Avatar } from '@/components/ui/Avatar'