Item

A compound list item with slots for media, content, and actions. Three variants — default, success, error — powered by design tokens.

Component Source

View the source code for the item component.

$lib/components/ui/item/item.svelte

Installation

npx nnuikit add item

# Optional: for action buttons
npx nnuikit add button

import * as Item from "$lib/components/ui/item";

Quick Start

Project brief.pdf

245 KB — Updated 2 hours ago

<Item.Root>
  <Item.Media>
    <IconPdf />
  </Item.Media>
  <Item.Content>
    <Item.Title>Project brief.pdf</Item.Title>
    <Item.Description>245 KB — Updated 2 hours ago</Item.Description>
  </Item.Content>
  <Item.Actions>
    <Button variant="orphan" size="icon-sm">
      <IconCross />
    </Button>
  </Item.Actions>
</Item.Root>

Interactive Playground

Toggle variant, media, description, and actions.

Document.pdf

245 KB — Updated 2 hours ago

Variant

Slots Show Media Show Description Show Actions

<Item.Root>
  <Item.Media>
    <IconPdf />
  </Item.Media>
  <Item.Content>
    <Item.Title>Document.pdf</Item.Title>
    <Item.Description>245 KB</Item.Description>
  </Item.Content>
  <Item.Actions>
    <Button variant="orphan" size="icon-sm">✕</Button>
  </Item.Actions>
</Item.Root>

Variants

Uploaded file

Ready to process

Upload complete

File processed successfully

Upload failed

File exceeds maximum size

<!-- Default -->
<Item.Root variant="default">
  <Item.Content>
    <Item.Title>Uploaded file</Item.Title>
    <Item.Description>Ready to process</Item.Description>
  </Item.Content>
</Item.Root>

<!-- Success -->
<Item.Root variant="success">
  <Item.Content>
    <Item.Title>Upload complete</Item.Title>
    <Item.Description>File processed successfully</Item.Description>
  </Item.Content>
</Item.Root>

<!-- Error -->
<Item.Root variant="error">
  <Item.Content>
    <Item.Title>Upload failed</Item.Title>
    <Item.Description>File exceeds maximum size</Item.Description>
  </Item.Content>
</Item.Root>

Item Group

Wrap multiple items with Item.Group and separate them with Item.Separator.

Report Q4.pdf

1.2 MB

Banner.png

340 KB

<Item.Group>
  <Item.Root>
    <Item.Media><IconPdf /></Item.Media>
    <Item.Content>
      <Item.Title>Report Q4.pdf</Item.Title>
      <Item.Description>1.2 MB</Item.Description>
    </Item.Content>
  </Item.Root>
  <Item.Separator />
  <Item.Root>
    <Item.Media><IconPhoto /></Item.Media>
    <Item.Content>
      <Item.Title>Banner.png</Item.Title>
      <Item.Description>340 KB</Item.Description>
    </Item.Content>
  </Item.Root>
</Item.Group>

API Reference

Item.Root

Prop	Type	Default	Description
`variant`	`"default" \| "success" \| "error"`	"default"	Visual state variant — controls surface and border colors.
`class`	`string`	""	Additional CSS classes.
`children`	`Snippet`	-	Compose with Item.Media, Item.Content, Item.Actions.

Sub-components

Component	Description
Item.Content	Flex column container for title + description. Takes remaining space.
Item.Title	Primary label. Color adapts to variant (default/success/error).
Item.Description	Secondary text below title. 2-line clamp. Color adapts to variant.
Item.Media	Leading slot for icons, avatars, or thumbnails. Fixed size.
Item.Actions	Trailing slot for buttons or controls. Flex row with gap.
Item.Group	Wraps multiple items into a vertical list.
Item.Separator	Horizontal divider between items in a group.
Item.Header	Group header label.
Item.Footer	Group footer. Color adapts to variant for progress/status text.