Separator

First

Second

Third

<Stack className="w-full">  <p className="text-sm">First</p>  <Separator />  <p className="text-sm">Second</p>  <Separator />  <p className="text-sm">Third</p></Stack>

Usage

import { Separator } from "@reva/ui";

<Separator />

Examples

Vertical

Use orientation="vertical" for a vertical separator.

Blog

Docs

Source

<HStack align="center" gap={4} className="h-5 text-sm">  <p className="text-sm">Blog</p>  <Separator orientation="vertical" />  <p className="text-sm">Docs</p>  <Separator orientation="vertical" />  <p className="text-sm">Source</p></HStack>

Vertical separators between menu items with descriptions.

Settings

Manage preferences

Account

Profile & security

Help

Support & docs

<HStack align="center" gap={4}>  <VStack gap={1}>    <p className="m-0 text-sm font-medium">Settings</p>    <p className="m-0 text-xs text-fg-muted">Manage preferences</p>  </VStack>  <Separator orientation="vertical" />  <VStack gap={1}>    <p className="m-0 text-sm font-medium">Account</p>    <p className="m-0 text-xs text-fg-muted">Profile & security</p>  </VStack>  <Separator orientation="vertical" className="hidden md:block" />  <VStack gap={1} className="hidden md:flex">    <p className="m-0 text-sm font-medium">Help</p>    <p className="m-0 text-xs text-fg-muted">Support & docs</p>  </VStack></HStack>

List

Horizontal separators between list items.

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

<VStack gap={2} className="w-full max-w-sm text-sm">  <HStack asChild align="center" justify="between">    <dl className="m-0">      <dt>Item 1</dt>      <dd className="m-0 text-fg-muted">Value 1</dd>    </dl>  </HStack>  <Separator />  <HStack asChild align="center" justify="between">    <dl className="m-0">      <dt>Item 2</dt>      <dd className="m-0 text-fg-muted">Value 2</dd>    </dl>  </HStack>  <Separator />  <HStack asChild align="center" justify="between">    <dl className="m-0">      <dt>Item 3</dt>      <dd className="m-0 text-fg-muted">Value 3</dd>    </dl>  </HStack></VStack>

Props

Separator forwards props to the Radix primitive. See the Radix UI Separator documentation for the full API.

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`decorative`	`boolean`	`true`
`asChild`	`boolean`	`false`