# Profile card

> A portrait whose details rise into a glass panel on hover.

Component · Pro · https://lodeui.com/components/profile-card

## When to use

- Showcasing a person: mentors, speakers, team pages.

## When not to use

- Dense member lists: use a table or avatar group.

## Installation

```bash
npx shadcn@latest add @lode/profile-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ProfileCard } from "@/components/ui/profile-card";

export function Mentor() {
  return <ProfileCard name="Jasmine Brooks" role="Design lead" bio="Leads design systems at Meridian." stats={[{ label: "Sessions", value: "128" }]} />;
}
```

## API reference

### ProfileCard

A portrait card whose details rise into a glass panel on hover or focus.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name / role / bio | `string` | – | Identity. |
| stats | `{ label; value }[]` | – | Up to three figures. |
| rating | `number` | – | Optional star score. |
| src / hue | `string / number` | – | Portrait image, or a generated portrait. |
| primaryAction / secondaryAction | `string` | `"Follow" / "Book a session"` | Button labels. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focusing the card reveals the details |

## Accessibility

- The card is focusable so keyboard users get the same reveal.

## Motion

- The panel grows with layout animation; the card lifts 4px on hover.

## Responsive behavior

- 288px wide.

## Performance

- Portrait is a plain <img>; use an optimized source.

## Notes for AI

- Wire primaryAction to your follow API.

## Related

- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.
- [Folder stack](https://lodeui.com/components/folder-stack) — A folder that fans its files out on hover and opens them in a lightbox.
- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.