Item

Installation

Copy editable source into an initialized application:

pnpm dlx @simurgh-ui/cli add item

For package consumption, import from the component subpath and load its optional recipe CSS:

React

import {
  ItemGroup,
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
} from '@simurgh-ui/react/item';
import '@simurgh-ui/styles/item.css';

Vue

import {
  ItemGroup,
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
} from '@simurgh-ui/vue/item';
import '@simurgh-ui/styles/item.css';

Angular

import {
  ItemGroupComponent,
  ItemComponent,
  ItemMediaComponent,
  ItemContentComponent,
  ItemTitleComponent,
  ItemDescriptionComponent,
  ItemActionsComponent,
} from '@simurgh-ui/angular/item';
import '@simurgh-ui/styles/item.css';

Omit the component stylesheet for fully headless styling. CLI-copied components use the local path written to simurgh.json and the copied application styles instead of these package imports.

Purpose

Item structures repeated rows such as files, settings, notifications, and search results. Item Group and Item provide native list/listitem roles while the remaining parts keep media, text, and actions consistently aligned.

Default presentation: structural

The optional recipe supplies layout and stable structure without a strong visual treatment. Product typography, color, and emphasis remain consumer-owned.

Basic usage

Live component Item

Design system

Updated two minutes ago

Anatomy

The public component parts are listed in API surface below. Use only the parts needed by the example; compound components depend on their documented parent/child nesting.

State model

This component exposes no public controlled/uncontrolled state pair. Configure it through the props, events, native attributes, or parent-owned state documented in the API tables.

Give the group an accessible name when multiple lists occur on the same page. Media is decorative by default; set decorative to false when its accessible content adds information not repeated by the title or description.

Examples

<ItemGroup aria-label="Projects">
  <Item>
    <ItemMedia>D</ItemMedia>
    <ItemContent>
      <ItemTitle>Design system</ItemTitle>
      <ItemDescription>Updated two minutes ago</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button>Open</Button>
    </ItemActions>
  </Item>
</ItemGroup>

<ItemGroup aria-label="Projects">
  <Item>
    <ItemMedia>D</ItemMedia>
    <ItemContent>
      <ItemTitle>Design system</ItemTitle>
      <ItemDescription>Updated two minutes ago</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button>Open</Button>
    </ItemActions>
  </Item>
</ItemGroup>

<simurgh-item-group aria-label="Projects">
  <simurgh-item>
    <simurgh-item-media>D</simurgh-item-media>
    <simurgh-item-content>
      <simurgh-item-title>Design system</simurgh-item-title>
      <simurgh-item-description>
        Updated two minutes ago
      </simurgh-item-description>
    </simurgh-item-content>
    <simurgh-item-actions>
      <simurgh-button>Open</simurgh-button>
    </simurgh-item-actions>
  </simurgh-item>
</simurgh-item-group>

Accessibility

Preserve the documented composition and accessible names when wrapping or restyling this component. See accessibility and RTL guidance for keyboard, focus, labeling, and directionality requirements.

API surface

React exports: ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions
Vue exports: ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions
Angular exports: ItemGroupComponent, ItemComponent, ItemMediaComponent, ItemContentComponent, ItemTitleComponent, ItemDescriptionComponent, ItemActionsComponent

Import these public symbols from the component subpath shown in Installation. Framework-specific props, events, slots, directives, methods, defaults, and native-attribute behavior belong in the API tables on this page; use the linked source only to verify the current implementation.

React API reference

React

An inherited-attributes entry means the component accepts the complete named React native interface, including its event handlers and ARIA and data attributes. Remaining attributes are forwarded to the rendered element unless the component behavior described on this page overrides them.

`ItemGroup`

Inherited attributes: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLDivElement> \| undefined`	`undefined`

`Item`

Inherited attributes: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLDivElement> \| undefined`	`undefined`

`ItemMedia`

Inherited attributes: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`decorative`	`boolean`	`true`
`ref`	`Ref<HTMLDivElement> \| undefined`	`undefined`

`ItemContent`

Inherited attributes: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLDivElement> \| undefined`	`undefined`

`ItemTitle`

Inherited attributes: HTMLAttributes<HTMLHeadingElement> & RefAttributes<HTMLHeadingElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLHeadingElement> \| undefined`	`undefined`

`ItemDescription`

Inherited attributes: HTMLAttributes<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLParagraphElement> \| undefined`	`undefined`

`ItemActions`

Inherited attributes: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLDivElement> \| undefined`	`undefined`

Vue API reference

Vue

Boolean props without explicit defaults use Vue’s false default. Undeclared attributes follow the fallthrough behavior stated for each component.

`ItemGroup`

Vue attribute fallthrough is enabled for the rendered root.

No declared props.

No emitted events.

Slots: default.

Exposed methods: none.

`Item`

Vue attribute fallthrough is enabled for the rendered root.

No declared props.

No emitted events.

Slots: default.

Exposed methods: none.

`ItemMedia`

Vue attribute fallthrough is enabled for the rendered root.

Prop	Type	Default / requirement
`decorative`	`boolean`	`true`

No emitted events.

Slots: default.

Exposed methods: none.

`ItemContent`

Vue attribute fallthrough is enabled for the rendered root.

No declared props.

No emitted events.

Slots: default.

Exposed methods: none.

`ItemTitle`

Vue attribute fallthrough is enabled for the rendered root.

No declared props.

No emitted events.

Slots: default.

Exposed methods: none.

`ItemDescription`

Vue attribute fallthrough is enabled for the rendered root.

No declared props.

No emitted events.

Slots: default.

Exposed methods: none.

`ItemActions`

Vue attribute fallthrough is enabled for the rendered root.

No declared props.

No emitted events.

Slots: default.

Exposed methods: none.

Angular API reference

Angular

Inputs and outputs use their public template names. Public methods are callable through a template reference or ViewChild. Native attributes apply to the documented template root or directive host; they are not automatically forwarded through component hosts.

`ItemGroupComponent`

Component selector: simurgh-item-group. The template’s first native element is ng-content. Angular host bindings: { role: 'list', '[attr.data-slot]': "'item-group'" }.

No inputs.

No outputs.