# Profile card (goodtabs UI)

A person with avatar, name, role, a mono meta line, a bio and outline actions.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/profile-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/profile-card`

## Usage

```tsx
import { ProfileCard } from "@/components/ui/profile-card"
import { Button } from "@/components/ui/button"

<ProfileCard
  user={{ name: "Mira Okafor", role: "Design engineer", meta: "Lisbon, joined Mar 2024" }}
  actions={<Button variant="outline" size="sm">Follow</Button>}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| user | `{ name: string; role?: string; image?: string; meta?: string; bio?: string }` |  | The person. Initials from name are the avatar fallback. |
| actions | `ReactNode` |  | Buttons on the right in a row, under the text in a column. Made pills. |
| layout | `"row" | "column"` | `"row"` | Avatar beside the text, or everything stacked and centred. |

## When to use

- Team and about pages, one card per person
- A member row in settings, with the actions on the right
- The author block under a post or a changelog entry

## When not to use

- A tiny inline mention, which wants an avatar and a name only
- Tables of many members, where a data table scans faster
- Editing a profile, which wants a form

## Notes for agents

- Server component with no state; pass buttons as actions and handle clicks in the parent
- The avatar is 48px; pass user.image for a photo, the initials show while it loads or when it is missing
- Buttons inside actions are made rounded-full; use variant outline and size sm to match the demos
- Name, role and meta truncate on one line in the row layout; the bio wraps

Docs: https://ui.goodtabs.co/components/profile-card