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)