Mokri

Preview

Installation

<> import.ts

import { Avatar, AvatarGroup } from "@/components/ui/avatar"

Code

<> component.tsx

import { Avatar, AvatarGroup } from "@/components/ui/avatar"

<Avatar src="/avatar.jpg" alt="User" />
<AvatarGroup avatars={avatars} />

API Reference

Avatar

An image element with a fallback to represent a user.

<> import.ts

import { Avatar, AvatarGroup } from "@/components/ui/avatar"

Props

Prop	Type	Default	Description
`src`	`string`	—	URL of the avatar image
`alt`	`string`	`"Avatar"`	Alt text for the image
`fallback`	`string`	—	Text to display when image is not available
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the avatar
`className`	`string`	`""`	Additional CSS classes
`onClick`	`() => void`	—	Click handler for the avatar

Examples

Example 1

<> example.tsx

// Basic avatar
<Avatar 
  src="/user.jpg" 
  alt="John Doe" 
/>

Example 2

<> example.tsx

// Avatar with fallback
<Avatar 
  src="/user.jpg" 
  alt="John Doe"
  fallback="JD"
/>

Example 3

<> example.tsx

// Different sizes
<Avatar size="sm" src="/user.jpg" alt="Small" />
<Avatar size="md" src="/user.jpg" alt="Medium" />
<Avatar size="lg" src="/user.jpg" alt="Large" />

Example 4

<> example.tsx

// Avatar group
<AvatarGroup
  avatars={[
    { src: '/user1.jpg', alt: 'User 1' },
    { src: '/user2.jpg', alt: 'User 2' },
    { src: '/user3.jpg', alt: 'User 3' }
  ]}
  max={3}
/>