Skip to content

Conversation

@shreyashpatel5506
Copy link

ProfileCard Component Contribution

πŸ“¦ Overview

This PR adds a new ProfileCard component to shadcn/ui - a versatile, reusable component for displaying user profiles with social media links.

✨ Features

  • User Profile Display: Shows name, role, avatar, and bio
  • Social Links: GitHub, LinkedIn, Website, and Email integration
  • Responsive Design: Works seamlessly on all screen sizes
  • Smooth Interactions: Hover effects and transitions
  • Accessibility: Semantic HTML and proper alt text
  • Type-Safe: Full TypeScript support

πŸ“ Component Details

Props

interface ProfileCardProps {
  name: string;           // User's full name
  role: string;           // User's role/title
  avatar: string;         // Avatar image URL
  bio: string;            // Short biography
  github?: string;        // Optional: GitHub URL
  website?: string;       // Optional: Website URL
  linkedin?: string;      // Optional: LinkedIn URL
  email?: string;         // Optional: Email address
  className?: string;     // Optional: Additional CSS classes
}

Dependencies
lucide-react (for social media icons)
card component (existing shadcn/ui component)
next/image (for optimized image loading)

πŸ“ Changes
✨ New: [profilecard.tsx](vscode-file://vscode-app/c:/Users/admin/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/workbench/workbench.html) - Main component
✨ New: [profile-card-demo.tsx](vscode-file://vscode-app/c:/Users/admin/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/workbench/workbench.html) - Example usage
πŸ“ Modified: [registry.json](vscode-file://vscode-app/c:/Users/admin/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/workbench/workbench.html) - Added 2 registry entries

<ProfileCard
  name="Sarah Anderson"
  role="Full Stack Developer"
  avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah"
  bio="Passionate about creating beautiful web experiences"
  github="https://github.com/sarah"
  linkedin="https://linkedin.com/in/sarah"
  website="https://sarahdev.com"
  email="[email protected]"
/>

βœ… Quality Checklist
βœ… TypeScript compilation: 0 errors
βœ… Component follows shadcn/ui patterns
βœ… Responsive design verified
βœ… Accessibility standards met
βœ… Dependencies available
βœ… Registry entries properly formatted

@vercel
Copy link

vercel bot commented Dec 10, 2025

@shreyashpatel5506 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@shreyashpatel5506
Copy link
Author

Hello team πŸ‘‹
This PR is ready for review.
Could someone please approve the workflow run and review the changes?
Thank you! πŸ™

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant