Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Item examples · Media

Item with Avatar for React

An outline item with a person's avatar, name and last-seen time, and a round invite button.

Framework
UI library

A person row: who they are, when they were last around, and one thing you can do. This React example puts a large Avatar in ItemMedia, the name and Last seen 5 months ago in ItemContent, and a round outline icon Button with a plus in ItemActions. The button is pill and icon-sm, and its aria-label says Invite.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What size should an avatar be in an Item?

Use Avatar's size prop. This row uses lg, next to a title and a description. ItemMedia does not resize the avatar, so the prop decides.

When does AvatarFallback show, and what should it say?

It shows when the picture can't be displayed, for example on a broken URL. Use the person's initials, HB here, so the row still identifies them.

Why an icon-only plus button?

The row already names the person, so a plus reads as add or invite them without taking room from the text. An icon-only button needs an aria-label; in a list, name the person too, such as Invite Hayden Bleasel, so each button is distinct.

What does the invite button use?

pill, size="icon-sm", and variant="outline". aria-label is Invite, and PlusIcon is aria-hidden. The row itself is variant="outline" with bg-background.

What belongs in the description of a person row?

The one detail that helps people decide what to do: last seen, role, email or team. Keep it to a line; the description is clamped to two.

Is the row accessible to people who can't see the picture?

Yes: the name is in the title, so the picture can stay decorative and the row is read as name, last seen and the Invite button. Add alt text to the image only when it shows something the text doesn't.

All 10 item examples