Profile Card

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

Installation

npx shadcn@latest add @scrollxui/profilecard

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'
/>

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

Property	Type	Default	Description
`img`	string	`required`	Profile image URL or path.
`name`	string	`required`	User’s full name.
`position`	string	`required`	Job title or role.
`bio`	string	`required`	Short user bio or description.
`skills`	Skill[]	`required`	Array of skills with name and icon.
`socialLinks`	SocialLink[]	`[]`	Array of social links with name, url, and icon.
`spotlight`	boolean	`false`	Enables interactive spotlight hover effect.
`spotlightColor`	string	`"14, 165, 233"`	RGB color used for the spotlight glow.