Profile Card

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

Drag →

Installation

npx scrollx-ui@latest add profilecard

Usage

import CenteredImageCard from "@/components/ui/profilecard";

<CenteredImageCard
      img="https://github.com/Adityakishore0.png"
      name="Ahdeetai"
      bio="Creator of ScrolIX UI, a modern component library built for speed and scalability."
      skills={[
        { name: "TypeScript", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" },
        { name: "Next.js", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" },
        { name: "Node.js", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" },
        { name: "JavaScript", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" },
        { name: "TailwindCSS", iconUrl: "https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg" },
        { name: "GitHub", iconUrl: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" }
      ]}
      githubUrl="https://github.com/Adityakishore0"
      twitterUrl="https://x.com/Ahdeetai"
      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`	string[]	`[]`	List of skill names displayed as badges.
`githubUrl`	string	`—`	Link to GitHub profile.
`twitterUrl`	string	`—`	Link to Twitter/X profile.