1. Components
  2. Data display
  3. Separator

Separator

Visually or semantically separates content.

Aria docsAria API ReferenceReport an issueEdit this page

dotUI

Tools for building high-quality, accessible UI.

Docs
Components
Hooks
Themes
<div className="space-y-2 rounded-md border p-4">
  <div>
    <h3 className="font-bold">dotUI</h3>
    <p className="text-sm text-fg-muted">Tools for building high-quality, accessible UI.</p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center space-x-4 text-sm">
    <div>Docs</div>
    <Separator orientation="vertical" />
    <div>Components</div>
    <Separator orientation="vertical" />
    <div>Hooks</div>
    <Separator orientation="vertical" />
    <div>Themes</div>
  </div>
</div>

Installation

npx dotui-cli@latest add separator

Options

Orientation

Use the orientation prop to change the direction of the separator.

Components
Hooks
Components
Hooks
<div className="flex items-center gap-10">
  <div className="flex h-5 items-center gap-2 text-sm">
    <div>Components</div>
    <Separator orientation="vertical" />
    <div>Hooks</div>
  </div>
  <div className="flex flex-col items-center gap-2 text-sm">
    <div>Components</div>
    <Separator orientation="horizontal" />
    <div>Hooks</div>
  </div>
</div>

API Reference

PropTypeDefaultDescription
elementType
string
-
The HTML element type to render.
orientation
'horizontal' | 'vertical'
'horizontal'
The orientation of the separator.
className
string
-
The CSS className for the element.
style
CSSProperties
-
The inline style for the element.

Last updated on 10/11/2024

BadgeLink