Profile image with initials as the fallback.
$ npx context-ds add avatarUse it for
People and organizations.
Dependencies: @radix-ui/react-avatar
import { Avatar, AvatarFallback } from "@/components/ui/avatar";// Initials on the brand blue stand in when there is no picture; 28px by default, 24px in dense rows.export function Product() { return ( <div className="flex flex-col gap-4"> <div className="flex items-center gap-2"> <Avatar> <AvatarFallback>AL</AvatarFallback> </Avatar> <Avatar> <AvatarFallback>MJ</AvatarFallback> </Avatar> <Avatar className="size-6"> <AvatarFallback>RK</AvatarFallback> </Avatar> </div> <div className="flex items-center gap-2.5"> <Avatar> <AvatarFallback>AL</AvatarFallback> </Avatar> <div className="text-body-sm leading-tight"> <p className="text-fg">Anwar Lemu</p> <p className="text-caption text-fg-subtle">anwar@acme.com</p> </div> </div> </div> );}"use client";import * as React from "react";import * as AvatarPrimitive from "@radix-ui/react-avatar";import { cn } from "@/lib/utils";function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) { return <AvatarPrimitive.Root data-slot="avatar" className={cn("relative flex size-7 shrink-0 overflow-hidden rounded-pill", className)} {...props} />;}function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) { return <AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full object-cover", className)} {...props} />;}// Initials in white on the brand blue, at 11px (the dashboard's team table and user menu).function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) { return <AvatarPrimitive.Fallback data-slot="avatar-fallback" className={cn("flex size-full items-center justify-center bg-brand text-axis text-on-brand", className)} {...props} />;}export { Avatar, AvatarFallback, AvatarImage };Reference: context-dashboard c0ddf7a src/components/shell/user-menu.tsx; src/components/team/team-page.tsx.