mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
fd72ad7430
* docs: add API Reference sections to all component documentation - Add comprehensive API Reference sections to 36 component docs - Document custom props, variants, and behaviors for each component - Distinguish between Base UI aliases and custom components - Include prop tables with Type, Default, and Description columns - Follow alert-dialog.mdx as the reference standard for quality Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: add essential inline examples and 'Also exported as' notes - Add inline code example for Menu's inset prop showing alignment pattern - Add 'Also exported as ToggleGroupItem' note to Toggle component - Add ToggleGroupSeparator to toggle-group documentation - Add 'Also exported as RadioGroupItem' note to Radio component Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix section ordering - API Reference before Examples Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: remove references to non-exported components Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix inaccurate API documentation per Cubic AI review Co-Authored-By: pasquale@cal.com <pasquale@cal.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: pasquale@cal.com <pasquale@cal.com>
94 lines
1.6 KiB
Plaintext
94 lines
1.6 KiB
Plaintext
---
|
|
title: Avatar
|
|
description: An image element with a fallback for representing the user.
|
|
|
|
links:
|
|
doc: https://base-ui.com/react/components/avatar#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="p-avatar-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/avatar
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="avatar" title="components/ui/avatar.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
```
|
|
|
|
```tsx
|
|
<Avatar>
|
|
<AvatarImage src="/avatars/01.png" alt="User avatar" />
|
|
<AvatarFallback>JD</AvatarFallback>
|
|
</Avatar>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Avatar
|
|
|
|
Root component. Styled wrapper for `Avatar.Root` from Base UI with default size of 32px (8 units) and rounded-full styling.
|
|
|
|
### AvatarImage
|
|
|
|
Image element for the avatar. Styled wrapper for `Avatar.Image` from Base UI.
|
|
|
|
### AvatarFallback
|
|
|
|
Fallback content displayed when the image fails to load. Styled wrapper for `Avatar.Fallback` from Base UI with muted background.
|
|
|
|
## Examples
|
|
|
|
### Fallback Only
|
|
|
|
<ComponentPreview name="p-avatar-2" />
|
|
|
|
### Different Sizes
|
|
|
|
<ComponentPreview name="p-avatar-3" />
|
|
|
|
### Different Radius
|
|
|
|
<ComponentPreview name="p-avatar-4" />
|
|
|
|
### Group Avatars
|
|
|
|
<ComponentPreview name="p-avatar-5" />
|