104Get started
HextaUI

Item: Separator

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

Storage

18.2 GB of 50 GB used

Bandwidth

312 GB this month

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>
  )
}

Add this example

This adds the example as components/examples/item/separator.tsx, together with the Item component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/item-separator.json

To add only the component, follow the Item installation.

Props in this example

The Item props this example sets, from the API reference.

Item

PropTypeDefault
size
"default" | "sm" | "xs""default"

Every prop is in the Item API reference.

More Item examples

See them all, with keyboard support and accessibility notes, on the Item page.

Related components