Skip to content
Components

Item

Item is a standalone component for displaying a single piece of content. Use with ItemContent, ItemTitle, ItemDescription, etc. for structured content.

Carrara Marble

Stone · Honed

Usage

import { Item, ItemActions, itemAnatomy, ItemContent, ItemDescription, ItemFooter, ItemGroup, itemGroupAnatomy, ItemGroupProps, ItemHeader, ItemMedia, ItemMediaProps, ItemProps, ItemSeparator, ItemTitle } from "@instruments/materia-ui/components/item";

Best practices

  • Structure content with ItemContent/ItemTitle/ItemDescription (plus ItemMedia/ItemActions) rather than raw divs - the compound parts carry the gap and truncation rhythm.

  • Wrap a set of items in ItemGroup and set the look via its variant (divided/separated/grouped) - Item adapts automatically, so avoid re-styling borders/backgrounds per item.

  • Use render to make the whole item a link/button (e.g. render={<Link href="…" />}); the item's children become the link's content.

  • Reach for Item for generic single rows; for files/documents use DocumentList, and for term/value metadata use DescriptionList.

Props

Item

PropTypeDefaultDescription
size"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"
variant"default" | "outline" | "muted" | "card" | null | undefined

ItemGroup

PropTypeDefaultDescription
orderedbooleanfalse

Render as an ordered <ol> instead of a <ul>.

variant"divided" | "separated" | "grouped" | null | undefined

ItemMedia

PropTypeDefaultDescription
tone"neutral" | "brand" | "danger" | "warning" | "success" | "info" | null | undefined
radius"rounded" | "square" | "full" | null | undefined
size"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined
iconimport("../../tokens/icon-component").IconComponent

Icon component from lucide-react or any SVG React component.

emphasis"outline" | "solid" | "ghost" | "soft" | null | undefined
iconSizeIconSize | undefined

Size of the icon inside the box. Defaults based on box size.

iconClassNamestring

Additional className for the icon itself.

variant"image" | "default" | "icon" | null | undefined

ItemSeparator

PropTypeDefaultDescription
variant"strong" | "default" | "muted" | "accent""default"

Visual weight of the separator line.

Also exports

  • componentItemActions
  • constitemAnatomy
  • componentItemContent
  • componentItemDescription
  • componentItemFooter
  • constitemGroupAnatomy
  • typeItemGroupProps
  • componentItemHeader
  • interfaceItemMediaProps
  • interfaceItemProps
  • componentItemTitle

Anatomy

Item

item

A flexible content container for displaying structured information

ItemMedia

item-media

Icon, image, or avatar display area

ItemHeader

item-header

Header row spanning full width

ItemContent

item-content

Main content area with title and description

ItemTitle

item-title

Primary heading

ItemDescription

item-description

Secondary text

ItemActions

item-actions

Action buttons or controls

ItemFooter

item-footer

Footer row spanning full width

Composition

Builds on

Flex, IconBox, Separator, Stack