Avatar
Avatars identify people, teams, or entities through initials or supplied imagery.
Overview and decision boundary
Use Avatar to identify people, teams, or entities in compact product surfaces.
Do not rely on avatar color as the only identifier.
Preview
import { Avatar } from '@nerio-ui/ui';<Avatar name="Maya Chen" />Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add avatarimport { Avatar } from '@nerio-ui/ui';Usage
import { Avatar } from '@nerio-ui/ui';<Avatar name="Maya Chen" />Variants
| Variant | Purpose |
|---|---|
sm | Compact size for dense layouts and inline use. |
md | Default size for most product surfaces. |
lg | Larger size for prominent local actions. |
image | Image is part of the public component contract. |
fallback | Fallback is part of the public component contract. |
Anatomy
| Slot | Purpose |
|---|---|
root | Circular identity container with tokenized size. |
image | Optional supplied image. |
fallback | Initials generated from the provided name. |
States
| State | Purpose |
|---|---|
Loaded or fallback | Fallback initials preserve layout when no image is supplied. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Use the name prop to generate fallback initials.
- Non-decorative images and fallbacks require a non-empty supplied alt text or normalized name; decorative fallbacks are hidden.
- Do not rely on Avatar alone for critical identification in dense lists.
API
| Prop | Purpose |
|---|---|
className | Extends the component root while preserving Nerio tokenized defaults. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | avatar installs 5 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | None. |
Package dependencies | clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use Avatar to identify people, teams, or entities in compact product surfaces.
Do / do not
Do
Pair avatars with names in dense lists when possible.
Do not
Do not rely on avatar color as the only identifier.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-avatar-size-sm | Public customization point for this component contract. |
--n-avatar-size-md | Public customization point for this component contract. |
--n-avatar-size-lg | Public customization point for this component contract. |
--n-avatar-border | Public customization point for this component contract. |
--n-avatar-background | Public customization point for this component contract. |