Avatar
An image element with a fallback for representing the user.
CNBX
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/avatar.tsx
export function Avatar(o) {
const inner = o.src
? \`<img src="\${o.src}" alt="" class="aspect-square h-full w-full object-cover"/>\`
: \`<span class="flex h-full w-full items-center justify-center rounded-full bg-muted text-sm">\${o.fallback}</span>\`;
return \`<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full \${o.class || ""}">\${inner}</span>\`;
}Installation
$ bext ui add avatarCopy and paste the following into src/components/ui/avatar.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/avatar.tsx
export function Avatar(o) {
const inner = o.src
? \`<img src="\${o.src}" alt="" class="aspect-square h-full w-full object-cover"/>\`
: \`<span class="flex h-full w-full items-center justify-center rounded-full bg-muted text-sm">\${o.fallback}</span>\`;
return \`<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full \${o.class || ""}">\${inner}</span>\`;
}On This Page