Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Team Member Card
Centered team member card skeleton with avatar, name, role, bio, and social icon buttons for team grids and directories
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Team pages showcase people—centered cards present each member professionally. This React skeleton uses shadcn/ui Skeleton with centered items-center layout, size-20 avatar, name and role text, bio lines, and three circular social icons (size-8 rounded-full). Built with max-w-xs for narrow cards and text-center for symmetry, the pattern shows complete team member structure—perfect for team pages, about us sections, staff directories, contributor grids, leadership showcases, or any interface where centered team member cards with social links define organizational identity during loading states.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
User Profile Header
Centered profile with buttons
Profile Card
Left-aligned with stats
Card with Avatar
Avatar card layout
Avatar
Real avatar component
Button
Real button component
List with Avatars
Avatar list items
Questions you might have
React Skeleton - Profile with Stats
Profile skeleton with left-aligned header, grid of three bordered stat cards, and full-width action button
React Skeleton - Simple Table Rows
A simple table skeleton with header row and five data rows in a four-column grid layout for basic tabular data loading states