ProfileCard

profilecard-1779393692990.tsx

'use client'
import { useState } from 'react'

export default function ProfileCard({
  name = 'Alex Johnson',
  role = 'Full-Stack Developer',
  avatar = '👨‍💻',
  followers = 1240,
  following = 380,
  posts = 87,
}) {
  const [following_, setFollowing] = useState(false)
  return (
    <div style={{
      background: '#fff', borderRadius: '16px', padding: '28px 24px',
      boxShadow: '0 4px 24px rgba(0,0,0,0.08)', textAlign: 'center', maxWidth: '280px',
    }}>
      <div style={{
        width: '72px', height: '72px', borderRadius: '50%',
        background: 'linear-gradient(135deg,#6d28d9,#2563eb)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: '32px', margin: '0 auto 14px',
      }}>{avatar}</div>
      <h3 style={{ margin: '0 0 4px', fontSize: '18px', fontWeight: 700, color: '#1e293b' }}>{name}</h3>
      <p style={{ margin: '0 0 18px', color: '#64748b', fontSize: '13px' }}>{role}</p>
      <div style={{ display: 'flex', justifyContent: 'space-around', marginBottom: '20px' }}>
        {[['Posts', posts], ['Followers', followers], ['Following', following]].map(([l, v]) => (
          <div key={l}>
            <div style={{ fontWeight: 700, fontSize: '16px', color: '#1e293b' }}>{v}</div>
            <div style={{ fontSize: '11px', color: '#94a3b8' }}>{l}</div>
          </div>
        ))}
      </div>
      <button
        onClick={() => setFollowing(!following_)}
        style={{
          width: '100%', padding: '10px', borderRadius: '10px', border: 'none',
          background: following_ ? '#f1f5f9' : 'linear-gradient(135deg,#6d28d9,#2563eb)',
          color: following_ ? '#374151' : '#fff', fontWeight: 600, cursor: 'pointer',
          fontSize: '14px', transition: 'all 0.2s',
        }}
      >{following_ ? 'Following' : 'Follow'}</button>
    </div>
  )
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

User profile card with avatar, stats and follow button

More from Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

import React from 'react';
import { useEffect, useState } from 'react';

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNo

NoisyCard

Cards

import React, { useState, useEffect } from 'react';

interface HolographicCardProps {
  children: React.ReactNode;
}

const HolographicCard: React.FC<HolographicCardProps> = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x

HolographicCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards