Data Display
User Profile Card
A profile card with cover image, avatar, bio, stats, and social links.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultybeginner
English Prompt
Create a user profile card component. Include a cover image placeholder at the top, a large overlapping avatar, user name, role/title, short bio, stats row (followers, following, projects), and social media links. Use shadcn/ui Card, Avatar, and Button components and Tailwind CSS. Make it responsive and add hover effects on interactive elements.
Chinese Prompt
创建一个用户资料卡片组件。顶部包含封面图片占位符、大型重叠头像、用户名、职位/头衔、简短简介、统计行（followers、following、projects）和社交媒体链接。使用 shadcn/ui Card、Avatar 和 Button 组件以及 Tailwind CSS。使其响应式并为交互元素添加悬停效果。
Overview
A profile card pattern for user directories, team pages, and social features. Combines identity, stats, and actions in one compact card.
Features
- Cover image placeholder
- Overlapping avatar
- Name, role, and bio
- Stats row
- Social link buttons
- Hover effects
- Responsive layout
Usage
Copy the prompt into v0 or Cursor. Replace the mock data with your user profile fields.
Customization
Modify the prompt to:
- Add follow/message actions
- Show badges or verification status
- Include location and join date
- Expand to a full profile page layout