Documentation Index
Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
Use this file to discover all available pages before exploring further.
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.
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>
);
}
<Separator size="small" />
<Separator size="half" />
<Separator size="full" />
<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.
Additional CSS class for the separator.