Avatar

Avatar s obrázkem / iniciálami / ikonou, 6 velikostmi, 3 tvary, stavovým indikátorem a AvatarGroup

Installation

pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/avatar.json

Usage

Preview

Velikosti
JN
JN
JN
JN
JN
JN
Tvary (md)
AB
circle
AB
rounded
AB
square
Barvy (circle)
PR
SE
BL
GR
RE
OR
YE
GR
DA
Stavový indikátor
JN
online
JN
busy
JN
away
JN
offline
Skupina (AvatarGroup)
PR
SE
BL
GR
RE
+4

Import

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

Example

// S obrázkem <Avatar src="/foto.jpg" alt="Jana" status="online" size="md" /> // S iniciálami <Avatar initials="JN" color="primary" shape="circle" size="lg" /> // Skupina avatarů <AvatarGroup max={3} size="md"> <Avatar initials="AB" color="primary" /> <Avatar initials="CD" color="blue" /> <Avatar initials="EF" color="green" /> <Avatar initials="GH" color="orange" /> </AvatarGroup>

Dependencies

lucide-reactclass-variance-authorityhttps://registry.ceskysoftware.cz/r/utils.json (registry)