Profile Card
Pro
A profile card with a spinning avatar ring, a follow button that morphs into a tick, and copy-link feedback.
Nora Vale
Lead artist·@nora.paints
Paints cozy worlds and very small dragons. Currently drawing tiles for Lantern Valley.
- Followers
- 12.8K
- Projects
- 24
- Likes
- 98.2K
Customize
#ff784f
8°
Installation
Profile Card is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy profile-card.tsx into components/ui and run npm install motion.
Usage
import { ProfileCard } from "@/components/ui/profile-card";
<ProfileCard
name={user.name}
role={user.title}
handle={`@${user.username}`}
src={user.avatarUrl}
followers={user.followers}
defaultFollowing={user.isFollowed}
onFollowChange={(next) => (next ? follow(user.id) : unfollow(user.id))}
/>Props
16 properties| Property | Type | Default | Description |
|---|---|---|---|
| name | string | — | Display name. Also gives the initials when there is no avatar. |
| role | string | — | Job or title under the name. |
| handle | string | — | Username shown next to the role. |
| bio | string | — | A short paragraph. |
| src | string | — | Avatar image URL. |
| avatar | ReactNode | — | Custom avatar. Takes priority over src and initials. |
| banner | ReactNode | — | Art for the header strip. |
| followers | number | — | Shown as the first stat and updated when following changes. |
| stats | { label: string; value: number | string }[] | [] | Up to three stats in total. Numbers are shortened, like 98.2K. |
| following | boolean | — | Controlled follow state. |
| defaultFollowing | boolean | false | Starting follow state when uncontrolled. |
| onFollowChange | (following: boolean) => void | — | Called when the follow button is pressed. |
| profileUrl | string | current page | Link that Copy link puts on the clipboard. |
| ringColors | string[] | ["#ff784f", "#ffc24a", "#ffa585", "#ff784f"] | Colors of the avatar ring. The first is also the button color. |
| tilt | number | 8 | Largest tilt in degrees. 0 turns it off. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion