Profile Card

A reusable profile card component displaying a user's image, name, bio, skills, and social links with interactive animations.

Ahdeetai
Drag →

Installation

npx shadcn@latest add https://scrollxui.dev/registry/profilecard.json 

Usage

import ProfileCard from "@/components/ui/profilecard";
<ProfileCard
      spotlight
      spotlightColor="99,102,241"
      img="https://github.com/Adityakishore0.png"
      name="Ahdeetai"
      bio="Creator of ScrolIX UI, a modern component library built for speed and scalability."
      skills={skills}
      socialLinks={socialLinks}
      position="Senior Software Engineer"
    />

Changelog

FeatureDescription
3D Tilt EffectCard now tilts based on mouse movement when revealed.
Spotlight EffectOptional radial spotlight on skills.
Custom Social LinksAdded support for multiple social links.

API Reference

ProfileCard

The ProfileCard component is used to create an interactive profile card with user image, name, role, bio, skills, and social links.

Props

PropertyTypeDefaultDescription
imgstringrequired
Profile image URL or path.
namestringrequired
User’s full name.
positionstringrequired
Job title or role.
biostringrequired
Short user bio or description.
skillsSkill[]required
Array of skills with name and icon.
socialLinksSocialLink[][]
Array of social links with name, url, and icon.
spotlightbooleanfalse
Enables interactive spotlight hover effect.
spotlightColorstring"14, 165, 233"
RGB color used for the spotlight glow.

Built withby Ahdeetai.