Separator

Demos

A horizontal separator between a heading and the content below it.

Heart health

Seven markers from your October panel.

ApoB, LDL-C, HDL-C, Triglycerides, Lp(a).

"use client"

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

export function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm">
      <div className="flex flex-col gap-1">
        <p className="text-sm font-medium">Heart health</p>
        <p className="text-xs text-muted-foreground">
          Seven markers from your October panel.
        </p>
      </div>
      <Separator className="my-4" />
      <p className="text-xs">ApoB, LDL-C, HDL-C, Triglycerides, Lp(a).</p>
    </div>
  )
}

Usage

Use a separator to split groups that would otherwise run together. Spacing alone is often enough. Reach for a line only when it is not.

Import it from @workspace/ui/components/separator.

Anatomy

Separator — A one-pixel line in the border color.

Notes

A vertical separator stretches to the height of its row. Give the row a height, such as h-5.
Use margin classes like my-4 to set the space around it.

Examples

Vertical

Set orientation="vertical" between inline items. The parent needs a height.

Overview

History

Notes

"use client"

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

export function SeparatorVertical() {
  return (
    <div className="flex h-5 items-center gap-4 text-xs">
      <span>Overview</span>
      <Separator orientation="vertical" />
      <span>History</span>
      <Separator orientation="vertical" />
      <span>Notes</span>
    </div>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Separator

Prop	Type	Default	Description
`orientation`	`"horizontal" or "vertical"`	`horizontal`	Direction of the line.
`className`	`string`	—	Classes merged onto the element.