Avatar Component

The Avatar component in the Arts Oven UI Component Library is designed to visually represent users or entities within your application. Avatars can display images, initials, or icons, making them versatile for various use cases.

Square Avatar

The size of avatars is highly customizable using Tailwind CSS utility classes for height and width or size. You can easily adjust the dimensions of your avatars to fit your design requirements:

avatar
avatar
avatar
avatar
avatar
avatar

Rounded Avatar

avatar
avatar
avatar
avatar
avatar
avatar

Squircle avatar

avatar
avatar
avatar
avatar
avatar
avatar

Avatar Group

avatar
avatar
avatar
avatar
avatar
avatar

Customizing with CSS Variables

You can customize the avatar size by using Tailwind CSS utility classes like w-, h-, and size-. This allows you to easily adjust the dimensions of the avatar to meet your design needs without the need for additional styles.

<div class="avatar size-10">
   <!-- Other elements -->
</div>

You can customize the appearance of the component using following CSS variables.

:root {
    /* Avatar border width */
    --avatar-border-width: 4px;
    /* Avatar border color */
    --avatar-border-color: #FFFFFF;
}

Refer to the Customization Guide to learn more about how to use these variables to customize the components.

Adding Shadows and Gradients

You can enhance your buttons with shadows and gradients by enabling these features in your tailwind.config configuration:

artsovenui: {
    shadow: true,
    gradients: true,
},

Contribute ideas!

Share Your Ideas! While we can’t guarantee that every request will be added, we will definitely consider your suggestions for future updates.

On this page