Separator

Visually or semantically separates content.

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

<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.

npm install radix-vue

Anatomy

Import all parts and piece them together.

<script setup>
import { Separator } from 'radix-vue'
</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 overwrite by asChild
asChild		boolean Setting asChild to true has the same effect as setting as to template.
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'	DataOrientation Orientation of the component. Either vertical or horizontal. Defaults to horizontal.

Data Attribute	Value
[data-orientation]	"vertical" | "horizontal"

Accessibility

Adheres to the separator role requirements.