---
title: "Person"
description: "A person's avatar alongside their name, job title, and company."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/person"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/person.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Person

A person's avatar alongside their name, job title, and company.

```tsx
import { Person } from "@sanity/sanity-id/components/person"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `accentColor` | `"none" \| "blue" \| "green" \| "magenta" \| "yellow"` | no | `"none"` | Accent color applied to the avatar border |
| `className` | `string` | no | — | Additional CSS classes |
| `company` | `string` | no | — | Company name displayed below the title |
| `image` | `string \| ((props: ComponentProps<"img">) => ReactNode)` | no | — | Avatar image URL or custom render function |
| `name` | `string` | no | — | Person's display name |
| `rounded` | `boolean` | no | `false` | Applies a circular crop to the avatar |
| `size` | `"small" \| "medium" \| "large"` | no | `"small"` | Size of the avatar and text |
| `title` | `string` | no | — | Job title displayed below the name |

## Usage

### Example 1

```tsx
import { Person } from "@sanity/sanity-id/components/person"

export default () => {
	const person = {
		name: "Magnus Hillestad",
		image: "https://cdn.sanity.io/images/3do82whm/next/fc4624b219eb58749320e4fe96cd4d675045f568-200x200.jpg",
		title: "CEO and co-founder",
		company: "Sanity",
	}
	return (
		<div className="grid grid-cols-[repeat(3,max-content)] gap-32 items-center">
			<Person size="small" {...person} />
			<Person size="medium" {...person} />
			<Person size="large" {...person} />
			<Person size="small" {...person} rounded />
			<Person size="medium" {...person} rounded />
			<Person size="large" {...person} rounded />
			<Person size="small" {...person} image={undefined} />
			<Person size="medium" {...person} image={undefined} />
			<Person size="large" {...person} image={undefined} />
		</div>
	)
}
```

### With accent color

```tsx
import { Person } from "@sanity/sanity-id/components/person"

export default () => {
	return (
		<div className="grid gap-y-12">
			<Person
				accentColor="blue"
				name="John Siciliano"
				title="Senior Technical Product Marketing Manager"
				company="Sanity"
				image="https://cdn.sanity.io/images/3do82whm/next/13186e6ee1bd8fdb19c65992cb4b633b5018af63-2048x2048.png"
			/>
			<Person
				accentColor="green"
				name="John Siciliano"
				title="Senior Technical Product Marketing Manager"
				company="Sanity"
				image="https://cdn.sanity.io/images/3do82whm/next/13186e6ee1bd8fdb19c65992cb4b633b5018af63-2048x2048.png"
			/>
			<Person
				accentColor="magenta"
				name="John Siciliano"
				title="Senior Technical Product Marketing Manager"
				company="Sanity"
				image="https://cdn.sanity.io/images/3do82whm/next/13186e6ee1bd8fdb19c65992cb4b633b5018af63-2048x2048.png"
			/>
			<Person
				accentColor="yellow"
				name="John Siciliano"
				title="Senior Technical Product Marketing Manager"
				company="Sanity"
				image="https://cdn.sanity.io/images/3do82whm/next/13186e6ee1bd8fdb19c65992cb4b633b5018af63-2048x2048.png"
			/>
		</div>
	)
}
```