Avatar
Image + fallback
Image + fallback — see the example below.
QU
tsx
import { Avatar } from "~/components/ui/base/avatar";
<Avatar.Root>
<Avatar.Image src="…" alt="Preview" />
<Avatar.Fallback>QU</Avatar.Fallback>
</Avatar.Root>
Sizes
Prop size on Avatar.Root: sm, md (default), lg.
S
M
L
tsx
import { Avatar } from "~/components/ui/base/avatar";
<div class="flex items-center gap-3">
<Avatar.Root size="sm">
<Avatar.Image src="…" alt="" />
<Avatar.Fallback>S</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root size="md">
<Avatar.Image src="…" alt="" />
<Avatar.Fallback>M</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root size="lg">
<Avatar.Image src="…" alt="" />
<Avatar.Fallback>L</Avatar.Fallback>
</Avatar.Root>
</div>
Fallback only
Without Avatar.Image or without src, the initial / placeholder remains.
AB
tsx
import { Avatar } from "~/components/ui/base/avatar";
<Avatar.Root>
<Avatar.Fallback>AB</Avatar.Fallback>
</Avatar.Root>
Image load error
An invalid URL shows the Avatar.Fallback again.
!
tsx
import { Avatar } from "~/components/ui/base/avatar";
<Avatar.Root>
<Avatar.Image src="https://example.invalid/does-not-exist.jpg" alt="" />
<Avatar.Fallback>!</Avatar.Fallback>
</Avatar.Root>
Metadata
Source: meta.generated.json (see npm run generate)
File base/avatar/meta.generated.json not found or path not allowed.