Profile Card

Avatar, name, subtitle, a tag group and an optional action region.

cards
card
structural
profile
avatar

Mira Odaka

Product design, six years

Design systems
Motion
Figma

Quick usage

usage

import { ProfileCard } from "@pinky-ui/components";

<ProfileCard
  avatarSrc="/mira.jpg"
  name="Mira Odaka"
  subtitle="Product design, six years"
  tags={["Design systems", "Motion", "Figma"]}
/>

Presets

Default

Photo avatar with tags.

Initials

No photo on hand yet.

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add profile-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
avatarSrc	string	—	A photo URL. Takes priority over initials when both are given.
avatarAlt	string	—	Alt text for avatarSrc.
initials	string	—	Shown in a plain circle when there's no avatarSrc. Falls back to a generic silhouette when neither is given.
name	ReactNode	—	Required.
subtitle	ReactNode	—	Optional.
tags	string[]	—	Optional tag group, rendered as pills.
maxTags	number	3	Tags beyond this count collapse into a single +N pill.
actions	ReactNode	—	Optional region below the tags — a button row, a follow toggle.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
padded	boolean	true	Inner content padding.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair. Structural cards should stay neutral.
as	ElementType	"div"	Pass Link from next/link to make the whole card navigable.
href	string	—	Only meaningful when as renders an anchor.
onClick	() => void	—	Makes the card a click target; adds the focus-visible ring automatically.

Accessibility

A plain <div> unless onClick/href is passed — then it's a real focusable, clickable surface with a focus-visible ring equivalent to its hover state.
The avatar image's alt text comes from avatarAlt; initials and the fallback silhouette are decorative (aria-hidden) since the name text beside them already carries the identity.

Reduced motion

The only motion is the hover shadow transition, which is a colour/opacity change, not a transform — nothing to disable under prefers-reduced-motion: reduce.

When to use

Team member tiles, author bylines, search results for people

When not to use

A list of many rows in a row-dense layout — use List Card or Horizontal Card instead