Initials on the brand gradient or a neutral disc, in three sizes.
Avatar shows initials, from name or given, on the brand gradient (the signed-in person) or a neutral disc (a record).
Installation
npx shadcn@latest add KezLahd/rime/avatarAlso installs: base.
Usage
import { Avatar } from "@/components/ui";
<Avatar name="Jane Cooper" />Examples
Sizes and tones
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | Full name; initials are derived (titles like "Dr" are skipped). | |
| initials | string | Explicit initials, e.g. a customer's "R.T." (dots are dropped). | |
| size | "sm" | "md" | "lg" | "md" | |
| tone | "brand" | "neutral" | "brand" | brand = the gradient (the signed-in user). neutral = a record (a customer). |
| label | string | Decorative when a name sits next to it (the default). | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --r-circle | 50% | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand-deep | tokens.css | … |
| --brand-fill | tokens.css | … |
| --brand-gradient | tokens.css | … |
| --brand-line | tokens.css | … |
| --ink-inverse | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --shadow-specular-dark | tokens.css | … |
Accessibility
- Decorative by default; pass label when it is the only name on screen.
Do and don't
Do
- Pair it with the person's name in text.
Don't
- Don't use it as a button on its own.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open avatar.md