Avatar

An image element with a fallback for representing the user. Migrated to @opencosmos/ui.

Installation
# Install @ecosystem/design-system to use Avatar
pnpm add @ecosystem/design-system
Preview
Loading preview...
Customize
— Additional CSS classes
Usage
Import
import { Avatar } from '@ecosystem/design-system';
Example
<Avatar>
  Content
</Avatar>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
classNametext""Additional CSS classes

Examples

Default
CN
Fallback
CN

Code Examples

Basic Usage

Avatar with image and fallback

import { Avatar, AvatarFallback, AvatarImage } from "@opencosmos/ui"

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>