Generate and export Tailwind color patterns.
Detailed documentation for the Avatar component in the PixelBlockUI library.
The Avatar component displays an image or fallback content with customizable size, border, color, and radius.
You can install the Avatar component using the PixelBlock CLI tool.
npx pixelblock-cli add Avatar
Display a basic avatar with an image:
Display an avatar with a border:
Display avatars with different sizes:
Display avatars with different background colors:
Display avatars with custom border radius:
The Avatar component accepts the following props:
| Prop | Type | Default Value | Description |
|---|---|---|---|
src | string | The URL of the image to display. | |
name | string | Name to generate initials for fallback content when src is not provided. | |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the avatar. |
isBordered | boolean | false | Whether to display a border around the avatar. |
color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default' | Background color of the avatar. |
radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'full' | Border radius of the avatar. |
className | string | Additional CSS classes to apply to the avatar container. |
The Avatar component provides flexibility in displaying user avatars with various configurations. By utilizing Tailwind CSS classes and props, it seamlessly integrates into your React or Next.js projects.
For more information and detailed usage instructions, refer to the PixelBlockUI Documentation.