mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
36 lines
616 B
Plaintext
36 lines
616 B
Plaintext
---
|
|
title: Avatar
|
|
description: An image element with a fallback for representing the user.
|
|
component: true
|
|
radix:
|
|
link: https://www.radix-ui.com/docs/primitives/components/avatar
|
|
api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="avatar-demo" />
|
|
|
|
## Installation
|
|
|
|
<Steps>
|
|
|
|
### Command
|
|
|
|
```bash
|
|
npx shadcn-ui add avatar
|
|
```
|
|
|
|
### Usage
|
|
|
|
```tsx
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
```
|
|
|
|
```tsx
|
|
<Avatar>
|
|
<AvatarImage src="https://github.com/shadcn.png" />
|
|
<AvatarFallback>CN</AvatarFallback>
|
|
</Avatar>
|
|
```
|
|
|
|
</Steps>
|