Separator

Divider for sections, rows, and compact controls.

Installation

npx shadcn@latest add @iconiq/r-separator

Props

Separator

Horizontal or vertical separator with the same Iconiq line, dashed, and dotted variants layered over Radix UI primitives.

orientation"horizontal" | "vertical"

Default "horizontal"

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

variant"line" | "dashed" | "dotted"

Default "line"

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

decorativeboolean

Default true

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

classNamestring

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

Current install target: Radix UI.

Dependencies declared by this registry entry: @radix-ui/react-separator.

Vertical separators rely on their parent for height, so place them inside a row with an explicit height or pass a height class.

The dashed variant uses background gradients so horizontal and vertical strokes keep the same dash rhythm. The dotted variant uses border rendering to keep dots crisp at one pixel.

Installs a Radix separator with the same orientation, decorative, className, and variant API as the Base UI version.

Uses the Radix separator primitive under the same Iconiq line, dashed, and dotted visual treatments.

Semantics

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

Built on the Radix Separator primitive while preserving the same decorative default and semantic opt-in as the Base UI version.

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, className, and variant API as the Base UI version.

Uses the Radix separator primitive under the same Iconiq line, dashed, and dotted visual treatments.

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