Avatar
A person's picture with their initial when there is none (or it fails to load).
<Avatar name="robin" size="lg" />Props
size
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/avatar.jsonThe CLI writes components/ikada/avatar.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Avatar } from "@sproutboat/ikada";
Usage
import { Avatar } from "@/components/ikada/avatar";
<Avatar name="robin" size="lg" />Examples
<Avatar name="robin" size="sm" />
<Avatar name="wren" />
<Avatar name="finch" size="lg" />heron
<div className="flex items-center gap-2.5">
<Avatar name="heron" />
<span className="text-sb-base font-medium">heron</span>
</div>Props
| Prop | Type | Description |
|---|---|---|
| src | string | null | The picture URL. A missing or broken image falls back to the initial. |
| namerequired | string | Whose avatar it is. Becomes the image alt text; its first letter is the fallback. |
| size | "sm" | "md" | "lg" | 24px (sm), 32px (md, the default) or 48px (lg). |
| className | string | Classes merged onto the root element, after ikada's own. |
| style | CSSProperties | ((state: AvatarRootState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AvatarRootState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Also takes every prop of Omit<ComponentProps<typeof BaseAvatar.Root>, "children" | "className">.
Source: src/components/avatar.tsx