sc1m
uiavatarsource: ok · hit
Avatar
Avatar component built on Base UI, styled with sc1m tokens.
npx shadcn add "https://sc1m.vercel.app/r/avatar.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightui-primitives@base-ui/react
Registry dependencies
https://sc1m.vercel.app/r/tokens.jsonhttps://sc1m.vercel.app/r/cn.json
Files1 · source cached 10/15/2026, 8:40:22 AM
src/components/ui/avatar/avatar.tsx
"use client";
import * as React from "react";
import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
import { cn } from "@/lib/cn";
export function Avatar({
className,
...props
}: React.ComponentProps<typeof BaseAvatar.Root>) {
return (
<BaseAvatar.Root
className={cn(
"flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface text-sm font-medium text-fg-muted",
className,
)}
{...props}
/>
);
}
export function AvatarImage({
className,
...props
}: React.ComponentProps<typeof BaseAvatar.Image>) {
return (
<BaseAvatar.Image
className={cn("size-full object-cover", className)}
{...props}
/>
);
}
export function AvatarFallback({
className,
...props
}: React.ComponentProps<typeof BaseAvatar.Fallback>) {
return (
<BaseAvatar.Fallback
className={cn(
"flex size-full items-center justify-center",
className,
)}
{...props}
/>
);
}