# Item: Grouped

> `variant="grouped"` puts items on one surface. Separators are drawn for you and inset to the text, the first and last rows own the outer corners, and the separators next to a hovered or focused row fade out.

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

## Add this example

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

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

## Source

```tsx title="components/examples/item/pressed.tsx"
"use client"

import * as React from "react"
import { IconCheck } from "@tabler/icons-react"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle,
} from "@/components/ui/item"

const themes = [
  { id: "system", title: "System", description: "Follow your device" },
  { id: "light", title: "Light", description: "Always light" },
  { id: "dark", title: "Dark", description: "Always dark" },
]

export function ItemPressed() {
  const [theme, setTheme] = React.useState("system")

  return (
    <ItemGroup variant="grouped" className="max-w-sm">
      {themes.map((option) => (
        <Item
          key={option.id}
          size="sm"
          render={<button type="button" />}
          aria-pressed={theme === option.id}
          onClick={() => setTheme(option.id)}
        >
          <ItemContent>
            <ItemTitle>{option.title}</ItemTitle>
            <ItemDescription>{option.description}</ItemDescription>
          </ItemContent>
          {theme === option.id && (
            <IconCheck className="size-4 text-foreground" aria-hidden="true" />
          )}
        </Item>
      ))}
    </ItemGroup>
  )
}
```

## Props in this example

### Item

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

### ItemGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "grouped"` | `"default"` | grouped puts items on one surface with automatic separators. |

## More Item examples

- [Hover highlight](https://hextaui.com/docs/item/examples/image.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)