AceUi

User Card

A clean and simple user card component displaying avatar, name, and description with optimized Next.js Image component.

Anand Yadav

Anand Yadav

Software Engineer

The UserCard component provides a clean, consistent way to display user information with avatar, name, and description , perfect for user lists, team members, and profile displays

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/user-card.json"

Usage

1import { UserCard } from "@/components/ui/user-card";
2

3export default function Example() {
4return (
5  <div>
6    <UserCard 
7      avatarSrc="/avatars/john-doe.jpg"
8      name="John Doe"
9      description="Senior Frontend Developer"
10    />
11  </div>
12);
13}

Features

  • Optimized Next.js Image component with proper sizing
  • Circular avatar with overflow handling
  • Responsive design that works on all screen sizes
  • Full dark mode support with proper contrast

Props

PropTypeDefaultDescription
avatarSrcstring—Source URL for the user's avatar image
namestring—User's display name
descriptionstring—User's role, title, or description
classNamestring—Additional CSS classes for the card container

Image Configuration

For Next.js projects, configure your next.config.js to handle external images:

1// next.config.js
2/** @type {import('next').NextConfig} */
3const nextConfig = {
4images: {
5  remotePatterns: [
6    {
7      protocol: 'https',
8      hostname: 'images.unsplash.com',
9    },
10    {
11      protocol: 'https',
12      hostname: 'github.com',
13    },
14    {
15      protocol: 'https',
16      hostname: 'avatars.githubusercontent.com',
17    },
18  ],
19},
20}
21

22module.exports = nextConfig

Examples

1// Team page
2<div className="max-w-4xl mx-auto p-6">
3<h1 className="text-3xl font-bold mb-8">Our Team</h1>
4<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
5  {teamMembers.map((member) => (
6    <UserCard
7      key={member.id}
8      avatarSrc={member.avatar}
9      name={member.name}
10      description={member.role}
11      className="hover:shadow-lg transition-shadow duration-300"
12    />
13  ))}
14</div>
15</div>
16

17// Comment section
18<div className="space-y-4">
19{comments.map((comment) => (
20  <div key={comment.id} className="border-b pb-4">
21    <UserCard
22      avatarSrc={comment.author.avatar}
23      name={comment.author.name}
24      description={comment.createdAt}
25      className="mb-3"
26    />
27    <p className="text-gray-700 dark:text-gray-300">{comment.content}</p>
28  </div>
29))}
30</div>
31

32// Sidebar user info
33<aside className="w-64 p-4">
34<UserCard
35  avatarSrc="/current-user-avatar.jpg"
36  name="Current User"
37  description="Online now"
38  className="mb-6"
39/>
40</aside>