120k
New

Item

PreviousNext

A versatile component for displaying content with media, title, description, and actions.

The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/item

Usage

<script lang="ts">
  import * as Item from "@/svelte-ui/item/index.js";
</script>
<Item.Root>
  <Item.Media variant="icon">
    <Icon />
  </Item.Media>
  <Item.Content>
    <Item.Title>Title</Item.Title>
    <Item.Description>Description</Item.Description>
  </Item.Content>
  <Item.Actions>
    <Button>Action</Button>
  </Item.Actions>
</Item.Root>

Composition

Use the following composition to build an Item:

Item.Group
└── Item.Root
    ├── Item.Header
    ├── Item.Media
    ├── Item.Content
    │   ├── Item.Title
    │   └── Item.Description
    ├── Item.Actions
    └── Item.Footer

Item vs Field

Use Field if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use Item.

Variant

Use the variant prop to change the visual style of the item.

Size

Use the size prop to change the size of the item. Available sizes are default, sm, and xs.

Examples

Icon

Use Item.Media with variant="icon" to display an icon.

Avatar

You can use Item.Media with variant="avatar" to display an avatar.

Image

Use Item.Media with variant="image" to display an image.

Group

Use Item.Group to group related items together.

Use Item.Header to add a header above the item content.

Use the child snippet to render the item as a link. The hover and focus states will be applied to the anchor element.

<Item.Root>
  {#snippet child({ props })}
    <a href="/dashboard" {...props}>
      <Item.Media variant="icon">
        <HomeIcon />
      </Item.Media>
      <Item.Content>
        <Item.Title>Dashboard</Item.Title>
        <Item.Description>Overview of your account and activity.</Item.Description>
      </Item.Content>
    </a>
  {/snippet}
</Item.Root>

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

Item.Root

The main component for displaying content with media, title, description, and actions.

PropTypeDefault
variant"default" | "outline" | "muted""default"
size"default" | "sm" | "xs""default"

Item.Group

A container that groups related items together with consistent styling.

<Item.Group>
  <Item.Root />
  <Item.Root />
</Item.Group>

Item.Separator

A separator between items in a group.

<Item.Group>
  <Item.Root />
  <Item.Separator />
  <Item.Root />
</Item.Group>

Item.Media

Use Item.Media to display media content such as icons, images, or avatars.

PropTypeDefault
variant"default" | "icon" | "image""default"
<Item.Media variant="icon">
  <Icon />
</Item.Media>
<Item.Media variant="image">
  <img src="..." alt="..." />
</Item.Media>

Item.Content

Wraps the title and description of the item.

<Item.Content>
  <Item.Title>Title</Item.Title>
  <Item.Description>Description</Item.Description>
</Item.Content>

Item.Title

Displays the title of the item.

<Item.Title>Item Title</Item.Title>

Item.Description

Displays the description of the item.

<Item.Description>Item description</Item.Description>

Item.Actions

Container for action buttons or other interactive elements.

<Item.Actions>
  <Button>Action</Button>
</Item.Actions>

Item.Header

Displays a header above the item content.

<Item.Root>
  <Item.Header>Header</Item.Header>
  <Item.Content>...</Item.Content>
</Item.Root>

Item.Footer

Displays a footer below the item content.

<Item.Root>
  <Item.Content>...</Item.Content>
  <Item.Footer>Footer</Item.Footer>
</Item.Root>