Skip to content

Separator

Visually or semantically separates content.
Radix Primitives
An open-source UI component library.
Blog
Docs
Source
vue
<script setup lang="ts">
import { Separator } from 'radix-vue'
</script>

<template>
  <div class="w-full max-w-[300px] mx-[15px]">
    <div class="text-white text-[15px] leading-5 font-semibold">
      Radix Primitives
    </div>
    <div class="text-white text-[15px] leading-5">
      An open-source UI component library.
    </div>
    <Separator
      class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]"
    />
    <div class="flex h-5 items-center">
      <div class="text-white text-[15px] leading-5">
        Blog
      </div>
      <Separator
        class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
        decorative
        orientation="vertical"
      />
      <div class="text-white text-[15px] leading-5">
        Docs
      </div>
      <Separator
        class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
        decorative
        orientation="vertical"
      />
      <div class="text-white text-[15px] leading-5">
        Source
      </div>
    </div>
  </div>
</template>

Features

  • Supports horizontal and vertical orientations.

Installation

Install the component from your command line.

bash
npm install radix-vue

Anatomy

Import all parts and piece them together.

vue
<script setup>
import { Separator } from 'radix-vue'
</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.