Separator

A visual divider between content sections.

Installation

npx shadcn@latest add https://ui.mattdowney.com/r/separator.json

Usage

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

Examples

Default

A divider between two blocks of content. It ships no margin, so the space around it comes from the class you give it or from the container's own gap.

Above

Below

Vertical

Vertical separators need an explicit height from their container (here a flex h-5 row).

Docs

Components

Settings

API Reference

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Direction of the divider. Vertical separators need an explicit height from their container.

"use client"

import * as React from "react"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"

import { cn } from "@/registry/lib/utils"

// @use-when a divider between items inside a component, such as menu groups or
// toolbar buttons. Between page sections, use Hr.
function Separator({
  className,
  orientation = "horizontal",
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive>) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props}
    />
  )
}

export { Separator }

Selection Card Sheet