Separator

Horizontal or vertical divider between groups of content.

Import

import { Separator } from '@marbleui/ui'

Props

<Separator>

Prop	Type	Default	Description
variant	`'solid' \| 'dashed'`	`'solid'`

Also accepts React Aria props (81).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Separator. Follow the primitive's docs for the full keyboard map.

Usage notes

Divider between groups of content. For spacing alone, use margin or gap instead of a rule.

<Separator className="my-4" />
<div className="flex h-5 items-center gap-3">
  Profile <Separator orientation="vertical" /> Billing
</div>

orientation is horizontal (default) or vertical; variant is solid (default) or dashed.
It renders a React Aria Separator, which has the separator role, so assistive tech announces it as a divider.
A vertical separator stretches to its flex parent’s height, so give the parent a height.

Example source · show

import { Separator } from './separator'

export const styles = {
  Horizontal: () => (
    <div className="w-72 text-sm">
      <div className="font-medium text-fg">Account</div>
      <div className="text-fg-muted">Manage your profile and preferences.</div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-3 text-fg-muted">
        <span>Profile</span>
        <Separator orientation="vertical" />
        <span>Billing</span>
        <Separator orientation="vertical" />
        <span>Security</span>
      </div>
    </div>
  ),
  Dashed: () => (
    <div className="w-72 text-sm text-fg-muted">
      <div>Subtotal</div>
      <Separator variant="dashed" className="my-3" />
      <div className="font-medium text-fg">Total</div>
    </div>
  ),
}

Source: packages/ui/src/separator/separator.tsx

Catalog

Category: layout
Priority: Foundation
Primitive: react-aria
React Aria: Separator
Base UI: Separator