Separator

Divider for sections, rows, menus, and compact controls.

Installation

npx shadcn@latest add @iconiq/r-separator

File Structure

Usage

"use client";

import { Separator } from "@/components/ui/r-separator";

export function SeparatorPreview() {
  return (
    <div className="w-full max-w-md space-y-4 px-4">
      <div className="rounded-lg border border-dashed border-border/70 p-4 text-muted-foreground text-sm">
        Section above
      </div>
      <Separator/>
      <div className="rounded-lg border border-dashed border-border/70 p-4 text-muted-foreground text-sm">
        Section below
      </div>
    </div>
  );
}

Props

Props
Description

Separator

orientation

Controls whether the divider spans across the inline axis or separates items inside a fixed-height row.

Type "horizontal" | "vertical"·Default "horizontal"

variant

Chooses the visual treatment. The default line variant renders a solid rule, dashed repeats short strokes, and dotted uses native dotted border rendering.

Type "line" | "dashed" | "dotted"·Default "line"

tone

Maps the divider color to border, muted, brand, or destructive tokens without overriding className.

Type "default" | "muted" | "brand" | "destructive"·Default "default"

spacing

Adds orientation-aware margin around the divider for section gutters. Use inset instead for compact menu dividers.

Type "none" | "sm" | "md" | "lg"·Default "none"

inset

Applies the compact negative-margin treatment used between menu or list groups.

Type boolean·Default false

decorative

Removes the separator from the accessibility tree when true. Set it to false only when the divider communicates structure that needs to be announced.

Type boolean·Default true

className

Merged onto the primitive root so local width, height, margin, color, or placement can be adjusted without changing the component file.

Type string

SeparatorLabel

children

Caption rendered between the two separators.

Type ReactNode

variant

Variant applied to both flanking separators.

Type "line" | "dashed" | "dotted"·Default "line"

tone

Tone applied to both flanking separators.

Type "default" | "muted" | "brand" | "destructive"·Default "default"

labelClassName

Classes merged onto the caption span.

Type string

separatorClassName

Classes merged onto both flanking separators.

Type string

className

Classes merged onto the outer flex container.

Type string

Semantics

The component defaults to decorative presentation, but both primitive versions can opt into separator semantics.

Built on the Radix Separator primitive. Pass decorative={false} when the divider should be announced by assistive technology.

Pass decorative=false when the divider is meaningful enough to be announced by assistive technology.

Additional primitive props and data attributes are forwarded to the root element for composition with layout or menu surfaces.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-separator.

Installs a Radix separator with the same orientation, decorative, tone, spacing, inset, variant, and SeparatorLabel API as the Base UI version.

Vertical separators stretch with self-stretch inside flex rows and keep a min-h-4 fallback when height is not set.

The generated registry file is /r/r-separator.json.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Section above
Section below