Components

Contact Item

A person with their avatar, name and one line of context, such as an email or when they were last active. The contact card adds one action: a menu of actions, a radio to pick them, or a link.

Figmashadcn equivalentitem

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry is coming soon. Until then, these are the commands you will run.

npx ritla add contact-item

Also works with shadcn: npx shadcn@latest add @ritla/contact-item

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

import { ContactItem, ContactCard } from "@/components/ui/contact-item";

<ContactItem name="Layla Amiriah" supportingText="Active now" status="online" />
<ContactCard href="/contacts/layla" name="Layla Amiriah" supportingText="layla@kanz.example" action="View" />

Examples

Cards with one action

An icon button opening a menu, named for whose actions they are (“More actions for Layla”). The View card is one link, so the whole card opens the contact.

Get the code ›

Pick a recipient

ContactRadioCard inside a RadioGroup: the whole card labels the radio, which is named by the name and status and described by the supporting line.

Get the code ›

Emails and phones stay left to right

The supporting line takes its direction from its text. An email sets it by itself; a phone number has no letters, so put it in <bdi dir="ltr">.

Get the code ›

API reference

ContactItem

Prop	Type	Default	Description
`name`	`string`	None	Figma's Name: the name people know, in the script the person wrote it in.
`supportingText`	`ReactNode`	None	Figma's Supporting text: one useful line, such as an email, a role or the last active time.
`src`	`string`	None	The person's photo. Without one, their initials show.
`status`	`"none" \| "online" \| "away" \| "offline" \| "verified"`	`"none"`	Figma's Status: a dot or badge on the avatar, read as a word after the name.
`size`	`"md" \| "lg"`	`"lg"`	Figma's Size: a 40 or 48px avatar.

ContactCard

Prop	Type	Default	Description
`action`	`ReactNode`	None	Figma's Action Type: an icon button (Icon Button) or a short word (Text), styled for you when it is a string.
`href`	`string`	None	Makes the whole card one link that opens the contact.
`render`	`ReactElement`	None	A router link (`<Link>`) with the card's look.
`…`	`ContactItem props`	None	Every `ContactItem` prop.

ContactRadioCard

Prop	Type	Default	Description
`value`	`string`	None	This person's value in the `RadioGroup`.
`disabled`	`boolean`	None	Can't be picked; the texts take the disabled color.
`…`	`ContactItem props`	None	Every `ContactItem` prop.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To a linked card, the action button, or the radio group.
`Enter`	Opens the contact or the actions menu.
`ArrowDownArrowUp`	Between people in a radio group, selecting the one reached.

ARIA

The avatar is decorative because the name is visible next to it, so the name isn't read twice.
The status is a word read after the name (“Layla Amiriah, Online”), never the colored dot alone.
The action button has its own name that says who it is for (“More actions for Layla”).
In a radio card, the name and status name the radio, and the supporting line describes it.

Arabic and RTL notes

Mirrors

The avatar and name start on the right; the action sits at the end, on the left.
The status dot and verified badge move to the avatar's bottom-left corner.

Does not mirror

Emails, phone numbers and account numbers in the supporting line stay left to right.
The three-dot icon and the verified badge.

Numerals: Numbers in the text are as you pass them; format times and counts with formatNumber, and leave phone and account numbers as written.
Arabic typography: Name body-18 Semibold and line body-14 at lg; body-14 and body-12 at md. Texts wrap rather than clip, so a longer Arabic name stays whole.
Mixed-direction text: The name and the supporting line are each isolated with dir="auto"; a phone number needs <bdi dir="ltr">.