Separator

A separator visually divides content in lists, menus, or other places.

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>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/separator

Usage

Use separators to visually divide content in lists, menus, or other places.

import { Separator } from "@/components/ui/separator";

<Separator />

Playground

Use the controls below to experiment with different separator props and see the live preview and code update.

orientation

<div className="w-full">
  <Separator orientation="horizontal" />
</div>

Examples

Components

Hooks

Components

Hooks

dotUI

Tools for building high-quality, accessible UI.

Docs

Components

Hooks

Themes

API Reference

Missing description.

Prop	Type	Default
	`string`	`—`
	`Orientation`	`'horizontal'`
	`DOMRenderFunction<"div" \| "hr", undefined>`	`—`

Last updated on 5/22/2026