# Item: Hover highlight

> Interactive items in a group share one highlight that glides to the row under the pointer and takes on its corners. It only follows a mouse or pen, never touch, and turn it off with `highlight={false}`. Image media corners are concentric with the row.

Example: https://hextaui.com/docs/item/examples/image
Component docs: https://hextaui.com/docs/item.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/item-image.json
```

This adds `components/examples/item/image.tsx` with the Item component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/item/image.tsx"
import {
  Item,
  ItemChevron,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

const albums = [
  {
    title: "Night Drive",
    artist: "Lune Avenue",
    src: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=120&h=120&fit=crop",
  },
  {
    title: "Paper Gardens",
    artist: "Mara Lin",
    src: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=120&h=120&fit=crop",
  },
  {
    title: "Low Tide",
    artist: "The Harbour",
    src: "https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=120&h=120&fit=crop",
  },
]

export function ItemImage() {
  return (
    <ItemGroup className="max-w-sm">
      {albums.map((album) => (
        <Item key={album.title} size="sm" render={<a href="#" />}>
          <ItemMedia variant="image">
            <img src={album.src} alt="" width={40} height={40} />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{album.title}</ItemTitle>
            <ItemDescription>{album.artist}</ItemDescription>
          </ItemContent>
          <ItemChevron />
        </Item>
      ))}
    </ItemGroup>
  )
}
```

## Props in this example

### Item

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"default" \| "sm" \| "xs"` | `"default"` |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

### ItemMedia

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "icon" \| "image"` | `"default"` | icon puts the icon on a tile and hides it from screen readers. image crops to a square. Both have corners concentric with the item. |

## More Item examples

- [Grouped](https://hextaui.com/docs/item/examples/pressed.md)
- [Selectable](https://hextaui.com/docs/item/examples/selectable.md)
- [Variants](https://hextaui.com/docs/item/examples/variants.md)
- [Sizes](https://hextaui.com/docs/item/examples/sizes.md)
- [Avatar](https://hextaui.com/docs/item/examples/avatar.md)
- [People](https://hextaui.com/docs/item/examples/people.md)
- [Actions](https://hextaui.com/docs/item/examples/actions.md)
- [Header and footer](https://hextaui.com/docs/item/examples/header-footer.md)
- [Separator](https://hextaui.com/docs/item/examples/separator.md)
- [Long content](https://hextaui.com/docs/item/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/item/examples/rtl.md)