Separator

Visually or semantically separates content.

Reka UI

An open-source UI component library.

Blog

Docs

Source

<script setup lang="ts">
import { Separator } from 'akar';
import './styles.css';
</script>

<template>
  <div class="akar-demo akar-demo-Separator">
    <div :style="{ width: '100%', maxWidth: 300, margin: '0 15px' }">
      <div class="Text">
        Reka UI
      </div>
      <div
        class="Text"
        :style="{ fontWeight: 500 }"
      >
        An open-source UI component library.
      </div>
      <Separator
        class="SeparatorRoot"
      />
      <div class="flex h-5 items-center">
        <div class="Text">
          Blog
        </div>
        <Separator
          class="SeparatorRoot"
          decorative
          orientation="vertical"
        />
        <div class="Text">
          Docs
        </div>
        <Separator
          class="SeparatorRoot"
          decorative
          orientation="vertical"
        />
        <div class="Text">
          Source
        </div>
      </div>
    </div>
  </div>
</template>

@import '../_colors/grass.css';

@scope (.akar-demo-Separator) {
  .SeparatorRoot {
    background-color: var(--grass-6);
  }
  .SeparatorRoot[data-orientation='horizontal'] {
    height: 1px;
    width: 100%;
  }
  .SeparatorRoot[data-orientation='vertical'] {
    height: 100%;
    width: 1px;
  }

  .Text {
    color: white;
    font-size: 15px;
    line-height: 20px;
  }
}

Features

Supports horizontal and vertical orientations.

Installation

Install the component from your command line.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Anatomy

Import all parts and piece them together.

<script setup>
import { Separator } from 'akar';
</script>

<template>
  <Separator />
</template>

API Reference

Root

The separator.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten 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`.

Separator.vue source

Data attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Accessibility

Adheres to the separator role requirements.

Select

Displays a list of options for the user to pick from—triggered by a button.

Slider

An input where the user selects a value from within a given range.