UserCard

Kompozitní karta uživatele kombinující Avatar, Tag, Rating a Button — vertikální / horizontální layout

Installation

pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/user-card.json

Usage

Preview

Vertikální layout
JN
Jana NovákováSenior Frontend Developer

Vyvíjím webové aplikace s důrazem na UX a výkon.

ReactTypeScriptTailwind
Horizontální layout
PS
Petr SvobodaBackend Engineer
Node.jsGo
MD
Marie DvořáčkováDesigner
FigmaUX

Import

import { UserCard } from "@/components/ui/user-card"

Example

// Vertikální <UserCard name="Jana Nováková" role="Senior Developer" initials="JN" status="online" bio="Frontend vývojář se zaměřením na UX." tags={["React", "TypeScript"]} tagColor="blue" rating={4.5} actionLabel="Kontaktovat" secondaryLabel="Profil" /> // Horizontální <UserCard name="Petr Svoboda" role="Backend Engineer" initials="PS" layout="horizontal" actionLabel="Zpráva" />

Dependencies

https://registry.ceskysoftware.cz/r/utils.json (registry)https://registry.ceskysoftware.cz/r/avatar.json (registry)https://registry.ceskysoftware.cz/r/tag.json (registry)https://registry.ceskysoftware.cz/r/rating.json (registry)https://registry.ceskysoftware.cz/r/button.json (registry)