Avatar
Visual component for representing users with support for images, text initials, and status indicators. Available in multiple sizes and shapes with customizable borders and backgrounds.
Component Setup
Create or update your Avatar component
Copy this code to create your Avatar component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Sizes
Choose from multiple predefined sizes to fit various UI contexts, from large profile displays to compact navigation elements and lists.
Shape square
Use the `shape="square"` prop to create square-shaped avatars. This option is particularly useful for uniform layouts or when you need a consistent visual style across your application.
Placeholder image
Create minimal avatar placeholders by omitting the image or text content. Set custom backgrounds using standard Tailwind classes (like "bg-gray-100" or "bg-blue-50") through the background prop or className. Perfect for loading states or default user representations.
With text
Add text initials to avatars for quick identification. Use the `text` prop to set the text content or the `className` prop to customize the text style.
Custom border
Add custom borders to avatars for visual differentiation. Use the `border` prop to set the border color or the `className` prop to customize the border style.
With background
Add custom backgrounds to avatars for visual differentiation. Use the `background` prop to set the background color or the `className` prop to customize the background style.
With indicator
Add indicators to avatars for additional information. Use the `indicator` prop to set the indicator position or the `className` prop to customize the indicator style.
Other example with custom icons
Enhance avatars with custom status indicators using icon components. Combine colored indicators with appropriate icons to represent various states like favorites, pinned items, approved status, or errors. Perfect for interactive user lists and activity feeds.
Stacked
Stack multiple avatars to display a group of users or entities. Use the `stacked` prop to enable stacking and the `size` prop to set the size of the avatars.
API Reference
The Avatar component provides a flexible way to display user avatars with various styling options.
Avatar.Root
Container element that holds all avatar components and provides common styling.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "string" | "w-14 h-14" | CSS classes for width and height |
type | "image""text" | "image" | Type of avatar content to display |
border | "boolean" | "false" | Whether to show a border around the avatar |
background | "string" | "bg-transparent" | CSS class for background color |
shape | "rounded""square" | "rounded" | Shape of the avatar |
Avatar.Image
Displays an image within the avatar with proper sizing and fallback handling.
| Prop | Type | Default | Description |
|---|---|---|---|
src | "string" | "undefined" | URL of the image to display |
lazy | "boolean" | "false" | Whether to lazy load the image |
Avatar.Text
Displays text (typically initials) when an image is not available or preferred.
| Prop | Type | Default | Description |
|---|---|---|---|
text | "string" | "required" | Text content to display (typically initials) |
Avatar.Status
Adds a colored dot indicator to show user status (online, away, busy, etc.).
| Prop | Type | Default | Description |
|---|---|---|---|
color | "string" | "bg-green-500" | CSS class for the status indicator color |
position | "top""bottom" | "bottom" | Position of the status indicator |
Avatar.Indicator
Allows for custom indicators like badges or icons to be placed on the avatar.
| Prop | Type | Default | Description |
|---|---|---|---|
children | "ReactNode" | "undefined" | Custom indicator content |
position | "top""bottom" | "bottom" | Position of the custom indicator |
className | "string" | "undefined" | Additional CSS classes |