Separator

PreviousNext

A component that creates visual separation between content with various styling options.

Component separator-demo not found in registry.

Installation

pnpm dlx shadcn@latest add separator

Usage

import * as Separator from "@/registry/radix-ui/ui/separator"
 
export default function SeparatorExample() {
  return (
    <div>
      <p>Content above</p>
      <Separator.Root variant="line" />
      <p>Content below</p>
    </div>
  )
}

Variants

Line (Default)

Component separator-line not found in registry.

Line Spacing

Component separator-line-spacing not found in registry.

Line Text

Component separator-text not found in registry.

Text

Component separator-line-text not found in registry.

Solid Text

Component separator-solid-text not found in registry.

Content

Component separator-content not found in registry.

Orientation

Component separator-orientation not found in registry.