Avatar
The Avatar component is used to display a user's profile picture or initials in a visually appealing manner. It supports various sizes and shapes, including circular and square variants.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import Avatar from '@start-base/start-ui/Avatar';Usages
Medium Circular Avatar
Avatar Without Image
SU
Square Large Avatar
SU
Large Avatar with Image
Avatar with Default Image
Small Circular Avatar
SU
Avatar Without Props
SU
Avatar With Next Image
API
| Name | Type | Default | Description |
|---|---|---|---|
| chars | string | "SU" | Chars of the Avatar |
| size | small medium large | medium | Size of the Avatar |
| variant | circular square | circular | Variant of the Avatar |
| picture | string | "" | Picture of the Avatar |
| className | string | "" | ClassName of the Avatar |
| defaultPicture | string | "" | Default Picture of the Avatar |
| Component | ElementType | "img" | Custom component to replace the <img> element. Can be used with Next Image. |
| componentProps | object | {} | Properties for Component element. |