---
title: "Separator"
description: "Visually or semantically separates content."
canonical_url: "https://vinicunca.dev/akar/components/separator"
---
# Separator

> Visually or semantically separates content.

```vue [index.vue]
<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>
```

```css [styles.css]
@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.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

## Anatomy

Import all parts and piece them together.

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

<template>
  <Separator />
</template>
```

## API Reference

### Root

The separator.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `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.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `decorative` |  | `boolean` | Whether or not the component is purely decorative.<br><br>When `true`, accessibility-related attributes<br>are updated so that that the rendered element is removed from the accessibility tree. |
| `orientation` | `"horizontal"` | `"vertical" \| "horizontal"` | Orientation of the component.<br><br>Either `vertical` or `horizontal`. Defaults to `horizontal`. |

[Separator.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Separator/Separator.vue)

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

## Accessibility

Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).

---

- [ARIA](https://www.w3.org/TR/wai-aria-1.2/#separator)
- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Separator)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.