Separator

Visually or semantically separates content.

shadcn/ui

The Foundation for your Design System

A set of beautifully designed components that you can customize, extend, and build on.

Installation

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.

pnpm dlx shadcn@latest add separator

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

<Separator />

Use orientation="vertical" for a vertical separator.

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

export function SeparatorDemo() {

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

export function SeparatorVertical() {

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

export function SeparatorMenu() {

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

export function SeparatorList() {