Item

Lays out one row of a list or a menu: a glyph, a name with a line under it, and its actions.

q3-pipeline-risk.csv

Variants

Supported configurations for this component.

DefaultOutlineWith descriptionMedia iconAs a control

States

Interaction states covered by the API and the style contract.

HoverFocus visibleDisabledPressedCheckedCursor row

Variants

5 examples
Default
q3-pipeline-risk.csv
sm
q3-pipeline-risk.csv
md
Outline
q3-pipeline-risk.csv
sm
q3-pipeline-risk.csv
md
With description
q3-pipeline-risk.csv3 rows · written by the agent
sm
q3-pipeline-risk.csv3 rows · written by the agent
md
Media icon
q3-pipeline-risk.csv3 rows · written by the agent
sm
q3-pipeline-risk.csv3 rows · written by the agent
md
As a control
sm
md

States

6 examples
Hover
Rest
Hover
Focus visible
Rest
Focus visible
Disabled
Pressed
Rest
Pressed
Checked
Rest
Checked
Cursor row
Rest
Cursor row

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Item

PropTypeDefaultDescription
variant'default'|'outline''default'`default` is the frameless row of a menu or list (spacing[2] padding, transparent); `outline` is a row on its own (hairline border.subtle, surface.raised ground, spacing[3] padding).
size'sm'|'md''md'Rung: sm 12px title, 16px glyph, 28px minimum height; md 14px title, 18px glyph, 32px minimum height. The description is 12px at both.
asChildbooleanfalseRenders via Radix Slot, merging the row onto its single child (a button, link, menuitemradio, option). A child that is interactive takes the row states: hover surface.hover, pressed and aria-checked surface.active, aria-selected or data-active surface.hover, the inset focus ring.
renderReact.ReactElement-The same as asChild, in the Base UI form some installers rewrite asChild into: the row renders this element with its props merged onto it, and the row's children, when given, become the element's children.
childrenReact.ReactNode-ItemMedia, ItemContent and ItemActions, in that order.
classNamestring-Extra classes merged onto the row.
styleReact.CSSProperties-Inline styles merged onto the row. Leave background to the row: its states depend on it.

ItemMedia

PropTypeDefaultDescription
variant'plain'|'icon''plain'`plain` is the bare glyph in text.muted at the rung's icon size (16 sm / 18 md); `icon` is a 32px box (spacing[8]) with a hairline border.subtle frame and an 18px glyph.
childrenReact.ReactNode-A Phosphor icon element (sized here, any `size` prop is overridden) or an Avatar.
classNamestring-Extra classes merged onto the media slot.
styleReact.CSSProperties-Inline styles merged onto the media slot.

ItemPart

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Extra classes merged onto the part.
styleReact.CSSProperties-Inline styles merged onto the part.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Artifact

Frames something an agent produced, such as a table or a chart, under a title bar with its actions.

3 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states