# Profile card

> A compact, centered profile card — avatar initials, role, follower stats, and follow/message actions.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/profile-card).

- Page, with a live preview: https://shadcn.exchange/r/quill/profile-card
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/profile-card-light-375274ef0458c20d.png
- Registry item: https://www.quilldesignsystem.com/r/profile-card.json
- Categories: data-display
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/profile-card.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`, `button`, `badge`, `separator`, `https://www.quilldesignsystem.com/r/icon.json`

## Notes from the registry

A compact, centered profile card — avatar initials, role, follower stats, and follow/message actions. Do: Label every stat ("Followers", "Following") directly beneath its number — a bare number has no meaning on its own. Don't: Show raw numbers with no label and expect position alone to convey what they mean. Use activity-feed when you want to show what someone did, not a static summary of who they are. Use data-table when you're listing many people at once — a table or list reads better than a full card per person.

## Files

### `registry/blocks/profile-card.tsx`

```tsx
import { Card, CardContent, CardFooter } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Icon } from '@/components/ui/icon'

/** A compact, centered profile card — avatar initials, role, follower stats, and follow/message actions. */
export function ProfileCard() {
  return (
    <Card className="w-[340px]">
      <CardContent className="flex flex-col items-center gap-3 pt-6 text-center">
        <div className="flex size-16 items-center justify-center rounded-full bg-muted text-xl font-medium text-muted-foreground">
          AL
        </div>
        <div className="flex flex-col items-center gap-1">
          <span className="text-lg font-medium text-foreground">Ada Lovelace</span>
          <span className="text-sm text-muted-foreground">Principal Engineer</span>
          <Badge variant="secondary">Pro</Badge>
        </div>
        <div className="flex w-full items-center justify-around pt-2">
          {[
            { label: 'Projects', value: '24' },
            { label: 'Followers', value: '1.2k' },
            { label: 'Following', value: '318' },
          ].map((s) => (
            <div key={s.label} className="flex flex-col items-center">
              <span className="text-base font-medium text-foreground tabular-nums">{s.value}</span>
              <span className="text-xs text-muted-foreground">{s.label}</span>
            </div>
          ))}
        </div>
      </CardContent>
      <CardFooter className="gap-2 pt-4">
        <Button className="flex-1">
          <Icon name="add" size={16} /> Follow
        </Button>
        <Button variant="outline" className="flex-1">
          <Icon name="mail" size={16} /> Message
        </Button>
      </CardFooter>
    </Card>
  )
}
```