Kappa / Item

Mesh validation passed

12 checks completed in 1.8 seconds.

Ready

<script setup>
import { CheckCircle2 } from "@lucide/vue";
import { Item } from "@dicehub/kappa/components/item";
</script>

<template>
  <Item.Root as="article" variant="outline">
    <Item.Media variant="icon"><CheckCircle2 aria-hidden="true" /></Item.Media>
    <Item.Content>
      <Item.Title>Mesh validation passed</Item.Title>
      <Item.Description>12 checks completed in 1.8 seconds.</Item.Description>
    </Item.Content>
    <Item.Actions>Ready</Item.Actions>
  </Item.Root>
</template>

Installation

Item is part of the main Kappa package. It is a presentational compound component with native HTML parts and no state-machine dependency.

Barrel

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemGroup,
  ItemHeader,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@dicehub/kappa";

Granular

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemGroup,
  ItemHeader,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@dicehub/kappa/components/item";

Usage

Use Item for content rows with a clear title, supporting description, leading media, and trailing status or action. Use Field for form controls.

Run 184 · Wake refinement

12 checks · 1.8 s

Ready

Run 183 · Boundary sweep

8 checks · 2.4 s

Review

Run 182 · Mesh baseline

16 checks · 0.9 s

Ready

<script setup>
import { Item } from "@dicehub/kappa/components/item";

const runs = [
  { id: "184", name: "Wake refinement", detail: "12 checks · 1.8 s", status: "Ready" },
  { id: "183", name: "Boundary sweep", detail: "8 checks · 2.4 s", status: "Review" },
];
</script>

<template>
  <Item.Group aria-label="Recent runs">
    <Item.Root v-for="run in runs" :key="run.id" as="article" role="listitem">
      <Item.Media variant="icon">{{ run.id }}</Item.Media>
      <Item.Content>
        <Item.Title>{{ run.name }}</Item.Title>
        <Item.Description>{{ run.detail }}</Item.Description>
      </Item.Content>
      <Item.Actions>{{ run.status }}</Item.Actions>
    </Item.Root>
  </Item.Group>
</template>

Composition

Typical part hierarchy

Item.Group
├── Item.Root
│   ├── Item.Header (optional)
│   ├── Item.Media
│   ├── Item.Content
│   │   ├── Item.Title
│   │   └── Item.Description
│   ├── Item.Actions
│   └── Item.Footer (optional)
└── Item.Separator (optional)

Kappa uses as for safe native element selection; useas="a" only when the complete row has one destination. The current Ark UI Vue package has no Item primitive, so Kappa owns this semantic native composition.

Use Item.Group for related rows. It renders role="list"; give each Item.Root role="listitem".
Use Item.Media for a visual. Use Item.Content for title and description.
Keep interactive controls out of an anchor item. Put actions on a non-link item when needed.
Use Item.Header and Item.Footer for full-width metadata regions.

Examples

Variants

Use the quiet default, outlined surface, or tinted muted treatment.

default surface

Useful for a dense application row.

default

outline surface

Useful for a dense application row.

outline

muted surface

Useful for a dense application row.

muted

<script setup lang="ts">
import { Item } from "@dicehub/kappa/components/item";

const variants = ["default", "outline", "muted"] as const;
</script>

<template>
  <Item.Root v-for="variant in variants" :key="variant" :variant="variant">
    <Item.Content>
      <Item.Title>{{ variant }} surface</Item.Title>
      <Item.Description>Use the treatment that matches the surrounding surface.</Item.Description>
    </Item.Content>
  </Item.Root>
</template>

Sizes

Match row density to the surrounding workflow with default, small, or extra-small spacing.

default density

Use the smallest row that keeps copy legible.

default

sm density

Use the smallest row that keeps copy legible.

xs density

Use the smallest row that keeps copy legible.

<script setup lang="ts">
import { Item } from "@dicehub/kappa/components/item";

const sizes = ["default", "sm", "xs"] as const;
</script>

<template>
  <Item.Root v-for="size in sizes" :key="size" :size="size" variant="outline">
    <Item.Content>
      <Item.Title>{{ size }} density</Item.Title>
      <Item.Description>Spacing and type scale change together.</Item.Description>
    </Item.Content>
  </Item.Root>
</template>

Media

Place an icon, avatar, image, or supplied visual before the item content.

Icon media

A compact symbol with a contained surface.

icon

Image media

A thumbnail fills the available media frame.

image

CFD

Supplied media

Custom content keeps its natural dimensions.

default

<script setup>
import { Item } from "@dicehub/kappa/components/item";
</script>

<template>
  <Item.Root variant="muted">
    <Item.Media variant="icon" aria-hidden="true">✓</Item.Media>
    <Item.Content>
      <Item.Title>Icon media</Item.Title>
      <Item.Description>Use image for a cropped thumbnail or default for custom content.</Item.Description>
    </Item.Content>
  </Item.Root>
</template>

Grouped Items

Use Item.Group for a list of related rows and Item.Separator for deliberate divisions.

Run 184

Wake refinement · 12 checks · 1.8 s

Ready

Run 183

Boundary sweep · 8 checks · 2.4 s

Review

Run 182

Mesh baseline · 16 checks · 0.9 s

Ready

Archive complete

Older runs are available in project history.

<script setup>
import { Item } from "@dicehub/kappa/components/item";
</script>

<template>
  <Item.Group aria-label="Simulation runs">
    <Item.Root role="listitem"><Item.Content><Item.Title>Run 184</Item.Title></Item.Content></Item.Root>
    <Item.Separator />
    <Item.Root role="listitem"><Item.Content><Item.Title>Run 183</Item.Title></Item.Content></Item.Root>
  </Item.Group>
</template>

Linked Item

Render the complete surface as one native anchor when the item has one destination.

Open run 184

Review the full convergence report.

<script setup>
import { Item } from "@dicehub/kappa/components/item";
</script>

<template>
  <Item.Root as="a" href="/runs/run-184" variant="outline">
    <Item.Media variant="icon" aria-hidden="true">→</Item.Media>
    <Item.Content>
      <Item.Title>Run 184</Item.Title>
      <Item.Description>Open the full convergence report.</Item.Description>
    </Item.Content>
  </Item.Root>
</template>

Header and Footer

Add full-width metadata above or below the primary media, content, and action row.

Wake refinement

Mesh and solver settings are ready.

<script setup>
import { Item } from "@dicehub/kappa/components/item";
</script>

<template>
  <Item.Root as="article" variant="muted">
    <Item.Header><span>RUN 184</span><span>18:42 UTC</span></Item.Header>
    <Item.Media variant="icon">CFD</Item.Media>
    <Item.Content>
      <Item.Title>Wake refinement</Item.Title>
      <Item.Description>Mesh and solver settings are ready.</Item.Description>
    </Item.Content>
    <Item.Footer><span>3 attachments</span><span>Owner: Mei Chen</span></Item.Footer>
  </Item.Root>
</template>

Accessibility

Item adds no widget role or keyboard behavior.
Item.Group provides a list container. Give each child Item.Root role="listitem" and name the group when context needs it.
Choose a heading element with Item.Title's as prop when the item names a document section.
Use a complete native anchor for a linked item. Do not nest buttons or other controls in it.
ItemSeparator is a horizontal native separator. Supply visible labels or descriptions through the surrounding content.
HTML, ARIA, data attributes, and event listeners pass to every part.

API Reference

Item

Outer row surface for media, content, actions, and optional metadata regions.

Prop	Type	Default	Description
`as`	`"div" \| "article" \| "section" \| "li" \| "a"`	`"div"`	Native element rendered by the outer item surface.
`variant`	`"default" \| "outline" \| "muted"`	`"default"`	Controls the item surface treatment.
`size`	`"default" \| "sm" \| "xs"`	`"default"`	Controls spacing, media size, and type scale.

Item.Media

Prop	Type	Default	Description
`variant`	`"default" \| "icon" \| "image"`	`"default"`	Chooses the supplied, icon, or image media treatment.

Item.Title

Prop	Type	Default	Description
`as`	`"h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "div"`	`"div"`	Sets the semantic element used for the item title.

Parts

Part	Element	Description
`Item.Root`	`div`	Responsive row surface for media, content, and actions.
`Item.Group`	`div[role=list]`	List container for related items.
`Item.Separator`	`hr`	Horizontal native separator between grouped rows.
`Item.Media`	`div`	Contains an icon, avatar, image, or other leading visual.
`Item.Content`	`div`	Flexible title and description column.
`Item.Title`	`div`	Primary item label; use as for document semantics.
`Item.Description`	`p`	Supporting item context or status detail.
`Item.Actions`	`div`	Trailing actions, status, or metadata.
`Item.Header`	`div`	Full-width metadata row before the main content.
`Item.Footer`	`div`	Full-width metadata row after the main content.

Data Slots

Slot	Description
`item`	Outer item surface.
`item-group`	Related item list container.
`item-separator`	Horizontal group separator.
`item-media`	Leading media container.
`item-content`	Flexible copy column.
`item-title`	Primary item label.
`item-description`	Supporting item description.
`item-actions`	Trailing actions or metadata.
`item-header`	Full-width leading metadata row.
`item-footer`	Full-width trailing metadata row.

Exports

Export	Description
`Item`	Compound API exposing all Item parts.
`ItemRoot`	Unaugmented item surface component.
`ItemGroup`	List container with role=list.
`ItemSeparator`	Native horizontal separator.
`ItemMedia`	Default, icon, or image media container.
`ItemContent`	Flexible title and description column.
`ItemTitle`	Configurable semantic title element.
`ItemDescription`	Supporting description paragraph.
`ItemActions`	Trailing action or metadata container.
`ItemHeader / ItemFooter`	Full-width metadata regions.
`ItemVariant / ItemSize / ItemMediaVariant`	Supported variant and density unions.