Profile Information at a Glance
A user card is a compact component that answers three questions in a second: who is this person, what do they do, and how do I act on that. This collection of blocks packages that pattern with an avatar, name, role, and quick action buttons arranged in a tidy card that repeats cleanly across a grid.
The cards are deliberately small in scope. They summarize a person and link onward, while a full profile card or profile page carries the deeper biography, stats, and activity.
Placements Across Your Product
User cards show up wherever people are the content. Team and about pages introduce staff, member directories let communities browse each other, admin dashboards list accounts with role badges and management actions, and collaboration tools surface teammates for inviting, assigning, or messaging.
Because each card is self-contained, the same component serves a marketing page and an internal tool. Only the action buttons change: a public page might show social links, while an admin view swaps in edit and suspend controls.
Foundation and Visual Language
The blocks are React components styled with Tailwind spacing and layout utilities, composed from Shadcn UI primitives: the Avatar component with image and initials fallback, Badge for roles and statuses, and Button for actions. A responsive Tailwind grid keeps the cards aligned from a single column on phones up to multi-column layouts on wide screens.
Styling flows through the Shadcn UI design tokens defined as CSS variables in globals.css. Card surfaces use the card token, secondary text uses muted-foreground, and borders use the border token, so the cards inherit your palette and switch between light and dark mode with zero component edits.
Three Frameworks, One Install Flow
The cards ship in React, Vuejs, and Svelte versions. The Vuejs edition builds on the shadcn-vue port and the Svelte edition on shadcn-svelte, so avatars, badges, and buttons behave identically in each ecosystem.
To use them, run the shadcn CLI command shown at the top of the example page, with npm, pnpm, yarn, and bun tabs, or copy the markup from the code tab. This is a pro collection, so the source and CLI install come with the All Access plan. Wiring real data is a straightforward map over your users array, passing name, role, and avatar URL into each card.