User Card
CardsFull Preview
A professional user profile card with avatar, details, and social links.
Preview Size:
Sarah Johnson
Senior UI/UX Designer
TechCorp Inc.
San Francisco, CA
1,234
Followers
567
Following
Viewing in Desktop size (1200px × 800px)View Full Size
Usage Instructions
Installation
Copy the component code and paste it into your project. Make sure you have the required dependencies installed.
bash
npm install framer-motion lucide-react
Basic Usage
Import and use the component in your React application:
tsx
import { UserCard } from '@/components/user-card';
export default function MyPage() {
return (
<div>
<h1>My Page</h1>
<UserCard />
</div>
);
}
Customization
This component accepts various props for customization. Check the component code to see all available props and their types.
Component Info
Category
Cards
Framework
React + Next.jsStyling
Tailwind CSSCSS
Dependencies
framer-motionlucide-react