Skip to main content
The Separator component is used to visually divide content in an interface. It supports both horizontal and vertical orientations, as well as different sizes and colors.

​
Usage

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

export default function Example() {
  return (
    <div>
      <p>Content above</p>
      <Separator />
      <p>Content below</p>
    </div>
  );
}

​
Vertical separator

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

export default function VerticalExample() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
      <span>Left content</span>
      <Separator orientation="vertical" />
      <span>Right content</span>
    </div>
  );
}

​
Sizes

<Separator size="small" />
<Separator size="half" />
<Separator size="full" />

​
Colors

<Separator color="primary" />
<Separator color="secondary" />
<Separator color="tertiary" />

​
API reference

​
Separator

​
orientation
'horizontal' | 'vertical'
default:"horizontal"
The orientation of the separator.
​
size
'small' | 'half' | 'full'
default:"full"
The size of the separator. Controls the width (horizontal) or height (vertical).
​
color
'primary' | 'secondary' | 'tertiary'
default:"primary"
The color variant of the separator.
​
className
string
Additional CSS class for the separator.