Separator

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

<Separator />

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/separator

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

import { Separator } from '@/components/ui/separator'

<Separator />

Tools for building high-quality, accessible UI.

Docs

Components

Hooks

Themes

Above the separator

Below the separator

Mehdi Ben Hadj Ali

mehdi@example.com

Settings

Billing

Notifications

Log out

A separator is a visual divider between two groups of content, such as groups of menu items or sections of a page.

Last updated on 7/7/2026