Reka UI logoReka
backdrop
Components

Separator

Visually or semantically separates content.
Reka UI
An open-source UI component library.
Blog
Docs
Source

Features

  • Supports horizontal and vertical orientations.

Installation

Install the component from your command line.

sh
$ npm add reka-ui

Anatomy

Import all parts and piece them together.

vue
<script setup>
import { Separator } from 'reka-ui'
</script>

<template>
  <Separator />
</template>

API Reference

Root

The separator.

PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwrite by asChild

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

decorative
boolean

Whether or not the component is purely decorative.
When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.

orientation
'horizontal'
'vertical' | 'horizontal'

Orientation of the component.

Either vertical or horizontal. Defaults to horizontal.

Data AttributeValue
[data-orientation]"vertical" | "horizontal"

Accessibility

Adheres to the separator role requirements.