SEPARATOR

Thin horizontal or vertical divider built on Radix UI. Optional centered label splits the line for section headers.

DEPS:@radix-ui/react-separator

PREVIEW

SECTION

INSTALLATION

BASH

npx shadcn@latest add @scificn/separator

USAGE

TSX

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

export function Example() {
  return (
    <div>
      <p>Block A</p>
      <Separator label="— CHECKPOINT —" />
      <p>Block B</p>
    </div>
  )
}

VARIANTS

DEFAULT (horizontal)

CHECKPOINT

WITH LABEL

LEFT

RIGHT

VERTICAL

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
label	string	—	Text centered in the separator. Renders flex layout with line-line-text-line-line.
orientation	"horizontal" \| "vertical"	"horizontal"	Direction of the separator line.
decorative	boolean	true	When true, hidden from accessibility tree.