New

UserProfileCard

Profile card with cover image area, avatar, name, bio, follower/following counts, and follow button.

Social & Communicationprofileusercardsocialavatar

Dependencies

Other dependencies:

@/components/ui/card@/components/ui/avatar@/components/ui/button@/components/ui/badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Card } from "@/components/ui/card";
4import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
5import { Button } from "@/components/ui/button";
6import { Badge } from "@/components/ui/badge";
7import { MoreHorizontal, Check } from "lucide-react";
8import { useState } from "react";
9
10export default function UserProfileCard() {
11  const [isFollowing, setIsFollowing] = useState(false);
12
13  return (
14    <Card className="w-full max-w-sm overflow-hidden">
15      <div className="h-32 bg-gradient-to-r from-violet-500 to-fuchsia-500" />
16      <div className="px-4 pb-4">
17        <div className="flex justify-between items-end -mt-12 mb-3">
18          <Avatar className="w-24 h-24 ring-4 ring-background">
19            <AvatarImage src="https://i.pravatar.cc/150?img=32" />
20            <AvatarFallback>JD</AvatarFallback>
21          </Avatar>
22          <div className="flex gap-2">
23            <Button
24              variant={isFollowing ? "outline" : "default"}
25              size="sm"
26              onClick={() => setIsFollowing(!isFollowing)}
27              className="gap-2"
28            >
29              {isFollowing && <Check className="w-4 h-4" />}
30              {isFollowing ? "Following" : "Follow"}
31            </Button>
32            <Button variant="ghost" size="sm">
33              <MoreHorizontal className="w-4 h-4" />
34            </Button>
35          </div>
36        </div>
37        <div className="space-y-1">
38          <div className="flex items-center gap-2">
39            <h3 className="font-semibold text-lg">Jane Doe</h3>
40            <Badge variant="secondary" className="text-xs">
41              <svg className="w-3 h-3 mr-1" viewBox="0 0 24 24" fill="currentColor">
42                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
43              </svg>
44              Verified
45            </Badge>
46          </div>
47          <p className="text-sm text-muted-foreground">@janedoe</p>
48          <p className="text-sm mt-2">
49            Product designer passionate about creating beautiful and functional user experiences. 🎨✨
50          </p>
51        </div>
52        <div className="flex gap-6 mt-4 pt-4 border-t">
53          <div className="text-center">
54            <p className="font-semibold">248</p>
55            <p className="text-xs text-muted-foreground">Posts</p>
56          </div>
57          <div className="text-center">
58            <p className="font-semibold">12.4K</p>
59            <p className="text-xs text-muted-foreground">Followers</p>
60          </div>
61          <div className="text-center">
62            <p className="font-semibold">892</p>
63            <p className="text-xs text-muted-foreground">Following</p>
64          </div>
65        </div>
66      </div>
67    </Card>
68  );
69}

Related Social & Communication Components

ChatBubble

New

Chat message component with avatar, message bubble, timestamp, and read receipts. Supports sent/received variants with different alignment and colors.

Social & Communication

#chat#message

@/components/ui/avatar