# Item: Separator

> In a default group, place an `<ItemSeparator />` between items yourself.

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

## Add this example

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

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

## Source

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

export function ItemSeparatorDemo() {
  return (
    <ItemGroup className="max-w-sm">
      <Item size="sm">
        <ItemContent>
          <ItemTitle>Storage</ItemTitle>
          <ItemDescription>18.2 GB of 50 GB used</ItemDescription>
        </ItemContent>
      </Item>
      <ItemSeparator />
      <Item size="sm">
        <ItemContent>
          <ItemTitle>Bandwidth</ItemTitle>
          <ItemDescription>312 GB this month</ItemDescription>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}
```

## Props in this example

### Item

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"default" \| "sm" \| "xs"` | `"default"` |  |

## More Item examples

- [Grouped](https://hextaui.com/docs/item/examples/pressed.md)
- [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)
- [Long content](https://hextaui.com/docs/item/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/item/examples/rtl.md)