Separator

Visually or semantically separates content.

Monolith UI

A meticulously crafted component library.

Design

Components

Templates

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/separator.json"

Usage

After you add the component with the CLI, import it from your UI folder:

import { Separator } from "@/components/ui/separator"
 
export function MyComponent() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
        <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

Examples

Horizontal

Account Settings

Manage your account details and preferences.

Vertical

Articles

Tutorials

News

API Reference

The Separator component extends the standard HTML div element attributes and radix-ui primitive props.

Prop	Type	Default	Description
`orientation`	`enum`	`"horizontal"`	The orientation of the separator (`horizontal` or `vertical`).
`decorative`	`boolean`	`true`	Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.

Select Sheet

On This Page

Installation Usage Examples Horizontal Vertical API Reference