Separator

PohonGitHub
Separates content horizontally or vertically.
Akar
An open-source UI component library.
Blog
Docs
Source 
<script setup lang="ts">
import { ASeparator } from 'akar';
</script>

<template>
  <div class="mx-4 max-w-[300px] w-full">
    <div class="text-sm leading-5 font-semibold">
      Akar
    </div>
    <div class="text-sm leading-5 dark:text-white">
      An open-source UI component library.
    </div>
    <ASeparator
      class="my-4 border border-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"
    />
    <div class="flex h-5 items-center">
      <div class="text-sm leading-5 dark:text-white">
        Blog
      </div>
      <ASeparator
        class="mx-4 border border-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"
        decorative
        orientation="vertical"
      />
      <div class="text-sm leading-5 dark:text-white">
        Docs
      </div>
      <ASeparator
        class="mx-4 border border-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"
        decorative
        orientation="vertical"
      />
      <div class="text-sm leading-5 dark:text-white">
        Source
      </div>
    </div>
  </div>
</template>

Features

  • Supports horizontal and vertical orientations.

Anatomy

Import all parts and piece them together.

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

<template>
  <ASeparator />
</template>

Pohon

One benefit of using Akar is its flexibility and low-level control over the components. However, this also means that you may need to manually construct more complex UI elements by combining multiple Akar components together.

If you feel there's a lot of elements that needs to be constructed manually using Akar, consider using Pohon UI instead. It provides a higher-level abstraction over Akar components with pre-defined styles and behaviors that can help you build UIs faster.

API Reference

Root

The separator.

Props

Prop Default Type
as'div'APrimitiveAsTag | Component

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

asChildboolean

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

Read our Composition guide for more details.

decorativeboolean

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''horizontal' | 'vertical'

Orientation of the component.

Either vertical or horizontal. Defaults to horizontal.

Data Attributes

Attribute Value
[data-orientation]'vertical' | 'horizontal'

Accessibility

Adheres to the separator role requirements.

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Splitter

A component that divides your layout into resizable sections.