Item

Rows of content with media, metadata and actions laid out the same way everywhere.

Two-factor authentication

Add a second step when you sign in, with an app or a security key.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add item

Dependencies

What add item installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

Examples

4 examples · 1 component

Two-factor authentication

Add a second step when you sign in, with an app or a security key.

With media and actions

An outlined row with an icon tile, text and an action.

AR
Ana Ruiz
[email protected]
DS
Diego Soto
[email protected]
MC
Mei Chen
[email protected]

List of people

ItemGroup is a list; each row is an <li /> with an avatar and a labelled action.

Billing

Plan, invoices and payment method.

Notifications

Email and push preferences.

Link rows

render={<a />} makes the whole row a link with hover and focus states.

Default

No frame; sits on the page surface.

Outline

A border for rows that stand alone.

Quarterly report Draft

Revenue, churn and the hiring plan.

Edited 2 h ago3 comments

Variants and footer

default, outline and muted; a footer carries metadata under the row.

API reference

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`Item` The row. render swaps the element and keeps its semantics: <li /> inside ItemGroup, <a href /> or a router link to navigate, <button /> to act.	`div`	—
`variant` No frame, a border, or a soft surface.	`"default" \| "outline" \| "muted"`	`"default"`
`size` Padding and gap; sm for dense lists.	`"default" \| "sm"`	`"default"`
`ItemMedia` "icon" frames an icon in a small tile; "image" crops an avatar or thumbnail.	`div`	`variant = "default"`
`ItemContent / ItemTitle / ItemDescription` Main text; the description is clamped to two lines.	`div / div / p`	—
`ItemActions` Buttons or badges at the end of the row.	`div`	—
`ItemHeader / ItemFooter` Full-width lines above or below the row for metadata.	`div`	—
`ItemGroup / ItemSeparator` A real list of rows and a decorative divider between them.	`ul / li`	—

Accessibility

ItemGroup is a <ul>, so screen readers announce the number of rows; render each Item as <li /> inside it.

A row that navigates is a link (render={<a href />}) and a row that acts is a button, never a div with onClick. A link row can't hold other buttons: move secondary actions out or keep the row static.

Links and buttons get a hover surface and a 2 px focus outline; plain rows don't react, so they don't look clickable.

Decorative icons in ItemMedia are aria-hidden; images need alt text unless the title already names them.

Server-safe: plain HTML and CSS.