Separator

nteract elements

Design system for Jupyter frontends

Docs

Components

GitHub

A visual divider component for separating content sections. Supports both horizontal and vertical orientations.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/separator.json

Copy from the nteract/elements registry.

Usage

import { Separator } from "@/registry/primitives/separator"

export function Example() {
  return (
    <div>
      <div>Content above</div>
      <Separator className="my-4" />
      <div>Content below</div>
    </div>
  )
}

Examples

Horizontal (Default)

Section 1

Section 2

<p>Section 1</p>
<Separator className="my-2" />
<p>Section 2</p>

Vertical

Cell

Output

Metadata

<div className="flex h-5 items-center space-x-4 text-sm">
  <div>Cell</div>
  <Separator orientation="vertical" />
  <div>Output</div>
  <Separator orientation="vertical" />
  <div>Metadata</div>
</div>

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the separator
`decorative`	`boolean`	`true`	Whether the separator is purely decorative
`className`	`string`	—	Additional CSS classes

Accessibility

When decorative is true (default), the separator is hidden from screen readers
Set decorative={false} when the separator has semantic meaning