NAMCHE UI

Item

A flexible list-row primitive for feeds, menus, and settings rows.

Sirdar deployed to eu-west-1

Build K-004 · 2 minutes ago

Live
Timbuktu build failed

Worker bundle would not compile · 18 minutes ago

Failed
Model eval completed

llama-3-70b-instruct v4 · 1 hour ago

Passed

Install

pnpm dlx shadcn@latest add @namche/item

Usage

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item';

<ItemGroup>
  <Item variant="outline">
    <ItemMedia variant="icon">{/* icon */}</ItemMedia>
    <ItemContent>
      <ItemTitle>Sirdar deployed to eu-west-1</ItemTitle>
      <ItemDescription>Build K-004 · 2 minutes ago</ItemDescription>
    </ItemContent>
    <ItemActions>{/* trailing badge or button */}</ItemActions>
  </Item>
</ItemGroup>

variant is default | outline | muted; size is default | sm | xs. Item takes a render prop like Button and Badge, so a whole row can render as a link. ItemMedia has its own varianticon sizes a leading SVG, image clips a leading thumbnail — and ItemSeparator draws a hairline between rows inside an ItemGroup.

On this page