Separator

Visually or semantically separates content.

Examples

Default

Radix Primitives

An open-source UI component library.

Blog
Docs
Source
<div class="w-full max-w-sm">
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
    <p class="text-muted-foreground text-sm">
      An open-source UI component library.
    </p>
  </div>
  <c-separator separator-classes="my-4"></c-separator>
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <c-separator orientation="vertical"></c-separator>
    <div>Docs</div>
    <c-separator orientation="vertical"></c-separator>
    <div>Source</div>
  </div>
</div>

API Reference

Separator

Prop Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' The orientation of the separator
decorative boolean false 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.
separator-classes string - Additional CSS classes for the element