SeparatorGroup

Groups multiple separators with optional captions in a consistent layout

Usage

The SeparatorGroup component provides a consistent layout for separating sections with horizontal or vertical rules. It consists of a flex container with automatically spaced children.

SeparatorGroup.Root: The flex container that holds the separators.
SeparatorGroup.Item: The individual separator element.
SeparatorGroup.Caption: An optional caption displayed alongside the separator group.

import { SeparatorGroup } from "@elemnts-ui/react"

<SeparatorGroup.Root>
  <SeparatorGroup.Item />
</SeparatorGroup.Root>

Caption

Use SeparatorGroup.Caption to add a label next to a separator for context.

API Reference

SeparatorGroup

Prop	Type	Default
as	`React.ElementType`	`span`
asChild	`boolean`	`false`

SeparatorGroupCaption

Prop	Type	Default
as	`React.ElementType`	`span`
asChild	`boolean`	`false`