> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/avatar.md).

# Avatar

The `Avatar` component is an image element with a fallback text for representing the user. 

### Preview

<div align="left"><figure><img src="/files/G7rDcGdr4ZCrfAiKJmeG" alt="Gravity avatar component" width="94"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Avatar } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <Avatar src='path/to/image.jpg' fallback='KG' />
  );
}
```

### Props

| Prop      | Description                               | Required | Value                   |
| --------- | ----------------------------------------- | -------- | ----------------------- |
| className | custom styles                             | optional | SCSS or Tailwind object |
| fallback  | Fallback text when image is not available | optional | string                  |
| src       | Image source URL                          | optional | string                  |

### Notes

* The `Avatar` component uses `AvatarPrimitive.Root`, `AvatarPrimitive.Image`, and `AvatarPrimitive.Fallback` from `@radix-ui/react-avatar`.
* Custom styles can be applied using the `className` prop.
* The `src` prop specifies the source URL for the avatar image.
* The `fallback` prop provides fallback content when the image is missing.
* For more details, refer to the [Shadcn Avatar documentation.](https://ui.shadcn.com/docs/components/avatar)