# Item

> Flexible list rows with media, content, and actions.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/item.json`

## Install

```tsx
import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup, ItemSeparator } from "@aspyn-io/kit";
```

### Item

A flexible row: media, content (title + description), and trailing actions.

```tsx
<Item variant="outline">
  <ItemMedia variant="icon">
    <FileIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Q3 report.pdf</ItemTitle>
    <ItemDescription>2.4 MB · updated 3 days ago</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">Download</Button>
  </ItemActions>
</Item>
```

### Grouped list

```tsx
<ItemGroup>
  <Item>
    <ItemContent>
      <ItemTitle>Billing</ItemTitle>
      <ItemDescription>Manage invoices and payment methods.</ItemDescription>
    </ItemContent>
  </Item>
  <ItemSeparator />
  <Item>
    <ItemContent>
      <ItemTitle>Members</ItemTitle>
      <ItemDescription>Invite and manage teammates.</ItemDescription>
    </ItemContent>
  </Item>
</ItemGroup>
```

## Notes

- variant: default | outline | muted; size: default | sm. Pass asChild to render the whole row as a link or button.
- ItemMedia variant='icon' | 'image' frames the leading slot; ItemHeader/ItemFooter add full-width rows above/below the content.