Preview

Installation

npx sigma-ui@latest add item

Usage

<script setup lang="ts">
import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
</script>

<template>
  <Item variant="outline">
    <ItemMedia variant="icon">
      <ShieldIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Security</ItemTitle>
      <ItemDescription>Manage how you sign in.</ItemDescription>
    </ItemContent>
  </Item>
</template>

variant is default, outline, or muted. size is default or sm. Render the row as a link with as or as-child.

• ItemMedia frames an icon or an image.
• ItemActions holds buttons.
• ItemHeader and ItemFooter span the full width of the row.
• ItemGroup stacks rows. Divide them with ItemSeparator.

Examples

Group

API Reference

Item

Props

Prop	Type	Default
variant Surface of the row.	"default" | "outline" | "muted" | null	"default"
size Padding and gap of the row.	"default" | "sm" | null	"default"
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Media, content, and actions for one row.	-

ItemActions

Slots

Slot	Scope
default Buttons or other controls at the end of the row.	-

ItemContent

Slots

Slot	Scope
default Title and description.	-

ItemDescription

Slots

Slot	Scope
default Secondary text. Links inside it are underlined.	-

ItemFooter

Slots

Slot	Scope
default Content that spans the full width under the row body.	-

ItemGroup

Slots

Slot	Scope
default Item rows, optionally divided by ItemSeparator.	-

ItemHeader

Slots

Slot	Scope
default Content that spans the full width above the row body.	-

ItemMedia

Props

Prop	Type	Default
variant icon draws a bordered tile, image frames a picture, and default leaves the content unstyled.	"default" | "icon" | "image" | null	-

Slots

Slot	Scope
default Icon or image.	-

ItemSeparator

Props

Prop	Type	Default
orientation Orientation of the component. Either vertical or horizontal. Defaults to horizontal.	DataOrientation	"horizontal"
decorative Whether or not the component is purely decorative. <br>When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

ItemTitle

Slots

Slot	Scope
default Primary text of the row.	-

Accessibility

ItemGroup renders role="list". When a row navigates, render it as a link. Actions inside the row stay buttons.

Key	Description
Tab	Moves focus to a link row or to an action inside the row.
Enter	Activates the focused link or button.