# Item

A row that shows one thing: media, a title, a description and an optional action.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/item
```

## Usage

```tsx
import { Item, ItemTile } from '@/components/fetaui/item'
import { InboxIcon } from '@fetaui/react/rounded/inbox'

export function Example() {
  return <Item media={<ItemTile><InboxIcon /></ItemTile>} title="Inbox zero" description="All caught up." href="/inbox" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| variant | default, outline, muted | default |
| size | md, sm, xs | md |
| media | ReactNode |  |
| title | ReactNode | required |
| description | ReactNode |  |
| action | ReactNode |  |
| meta | ReactNode |  |
| href | string |  |
| external | boolean | false |
| onClick | (event) => void |  |
| active | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |
| ItemTile tone | CSS colour |  |
| ItemGroup title | string |  |
| ItemGroup separated | boolean | true |

## When to use

- A person, a file, a track, a link or a setting.
- Group rows that belong together in Item Group, with inset separators.

## When not to use

- When rows need comparing by column: use Table.
- With more than one action.

## Accessibility

- A navigating Item is a link with the title as its name.
- Actions carry their own labels, like Invite to project.
- Item Group is a list, so screen readers announce the count.

## Motion

- Hover fades the wash in over 120 ms, and the chevron moves 2 px and goes to full ink.
- The external arrow moves up and right 2 px.
- Press sinks the row to 0.99 in 80 ms.
- With reduced motion, hover is the wash only and press has no scale.