apsara

Documentation Examples

SeparatorA visual divider that separates content with support for vertical and horizontal orientations.

Radix UI API Reference

Preview

Usage

The Separator component creates a separation between content sections.

Installation

Install the component from your command line.

npm install @raystack/apsara

import { Separator } from '@raystack/apsara/v1'

// Basic usage

<Separator />

// With custom size

<Separator size="half" />

// Vertical orientation

<Separator orientation="vertical" size="small" />

Props

The Separator component accepts the following props:

size: Defines the length of the separator ("small" | "half" | "full", default: "full")
color: Sets the color of the separator ("primary" | "secondary" | "tertiary", default: "primary")
orientation: Sets the direction of the separator ("horizontal" | "vertical", default: "horizontal")
className: Additional CSS class names

Colors

The Separator component supports three colors.

Sizes

The Separator component supports three sizes.

Orientation

Separator can be rendered in both horizontal and vertical orientations.

The Separator component follows accessibility best practices:

Uses role="separator" by default
Is marked as decorative for visual separation
Maintains proper color contrast
Supports proper semantic structure in both orientations