1. Components
  2. Data display
  3. Separator

Separator

Visually or semantically separates content.

Aria docsReport 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

Anatomy

import { Separator } from "@/components/core/separator";
 
<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
elementTypestring-The HTML element type to render.
orientation'horizontal' | 'vertical''horizontal'The orientation of the separator.
classNamestring-The CSS className for the element.
styleCSSProperties-The inline style for the element.

Last updated on 10/11/2024

BadgeTable
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.