Item

A compact row primitive for lists: icon/media + content + actions. Keep items flat/inset when nested inside elevated containers.

Basic Usage

Settings

A simple list: Item stays flat, container owns elevation.

Profile

Update your personal info

Billing

Manage subscription and invoices

Mixed content

Use ItemSeparator for grouping; keep actions lightweight.

Preferences

Theme, language, and shortcuts

Payment method

Visa ending in 4242

Pick one surface leader

In lists, prefer flat/ghost. Use stronger variants sparingly.

Flat

Default for nested lists.

Ghost

Lightest row styling for dense panels.

Default

Use when the Item is the main surface (not nested).

Component

Notes

Item

Row container. Use variant (flat, ghost, default, muted, outline) and size.

ItemMedia

Leading slot for icon or image (variant: icon/image).

ItemContent

Text stack area; pair with ItemTitle.

ItemActions

Trailing actions (keep buttons flat/outlined inside containers).

ItemGroup

Vertical stack of rows.

ItemSeparator

Optional divider between row groups.

Elevation note

In Paper Cut, lists are usually nested inside a container surface. Keep row variants quiet (flat/ghost) and let the container carry the main shadow.