Separator

A hairline that divides content horizontally or vertically, with an optional label and a decorative mode for purely visual lines.

HextaUI

Components that feel great to use and to write.

Docs

Components

Source

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

export function SeparatorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1">
        <h4 className="font-medium">HextaUI</h4>
        <p className="text-muted-foreground">
          Components that feel great to use and to write.
        </p>
      </div>
      <Separator />
      <div className="flex h-5 items-center gap-4">
        <a href="#">Docs</a>
        <Separator orientation="vertical" />
        <a href="#">Components</a>
        <Separator orientation="vertical" />
        <a href="#">Source</a>
      </div>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/separator.json

Adds the component, the HextaUI theme tokens and any HextaUI components it depends on.

Add the theme tokens to your global CSS, if you haven’t yet.
2
Install the dependencies.
```
pnpm add @base-ui/react cn
```

Copy and paste the following code into your project.

components/ui/separator.tsx

"use client"

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

type SeparatorAlign = "start" | "center" | "end"

type SeparatorOrientation = NonNullable<SeparatorPrimitive.Props["orientation"]>

type SeparatorProps = SeparatorPrimitive.Props & {
  decorative?: boolean
  align?: SeparatorAlign
}

const lineClassName: Record<SeparatorOrientation, string> = {
  horizontal:
    "h-(--hairline) w-full shrink-0 bg-border forced-colors:bg-canvas-text",
  vertical:
    "w-(--hairline) shrink-0 self-stretch bg-border forced-colors:bg-canvas-text",
}

const labelledClassName: Record<SeparatorOrientation, string> = {
  horizontal:
    "flex w-full shrink-0 items-center gap-3 text-xs text-muted-foreground before:h-(--hairline) before:min-w-4 before:flex-1 before:bg-border after:h-(--hairline) after:min-w-4 after:flex-1 after:bg-border data-[align=end]:after:hidden data-[align=start]:before:hidden",
  vertical:
    "flex shrink-0 flex-col items-center gap-3 self-stretch text-xs text-muted-foreground before:min-h-4 before:w-(--hairline) before:flex-1 before:bg-border after:min-h-4 after:w-(--hairline) after:flex-1 after:bg-border data-[align=end]:after:hidden data-[align=start]:before:hidden",
}

const labelAlignClassName: Record<SeparatorAlign, string> = {
  start: "text-start",
  center: "text-center",
  end: "text-end",
}

function mergeClassName<State>(
  base: string,
  className: string | ((state: State) => string | undefined) | undefined
) {
  return typeof className === "function"
    ? (state: State) => cn(base, className(state))
    : cn(base, className)
}

function hasContent(children: React.ReactNode) {
  return React.Children.toArray(children).some(
    (child) => typeof child !== "string" || child.trim() !== ""
  )
}

function Separator({
  className,
  orientation = "horizontal",
  decorative = false,
  align = "center",
  children,
  ...props
}: SeparatorProps) {
  const labelled = hasContent(children)
  const semantics = labelled
    ? { role: undefined, "aria-orientation": undefined }
    : decorative
      ? { role: "none", "aria-orientation": undefined }
      : {}

  return (
    <SeparatorPrimitive
      data-slot="separator"
      data-content={labelled ? "" : undefined}
      data-align={labelled ? align : undefined}
      orientation={orientation}
      className={mergeClassName(
        (labelled ? labelledClassName : lineClassName)[
          orientation === "vertical" ? "vertical" : "horizontal"
        ],
        className
      )}
      {...semantics}
      {...props}
    >
      {labelled ? (
        <span
          data-slot="separator-label"
          className={cn(
            "flex max-w-full min-w-0 items-center gap-1.5 text-pretty wrap-anywhere [&>svg]:size-3.5 [&>svg]:shrink-0",
            labelAlignClassName[align]
          )}
        >
          {children}
        </span>
      ) : null}
    </SeparatorPrimitive>
  )
}

export { Separator }
export type { SeparatorAlign, SeparatorProps }

Update the import paths to match your project setup.

Usage

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

<Separator />
<Separator orientation="vertical" />
<Separator>Or continue with</Separator>

The line is one physical pixel thick on every screen, the same hairline as borders, so it lines up with cards and inputs around it. Space it with the parent's gap or a margin.

Examples

Vertical

With orientation="vertical" the line stretches to the height of its flex row. Outside a flex row, give it a height.

2,481Stars

164Forks

38Contributors

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

export function SeparatorVertical() {
  return (
    <div className="flex items-center gap-4 text-sm">
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">2,481</span>
        <span className="text-muted-foreground">Stars</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">164</span>
        <span className="text-muted-foreground">Forks</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">38</span>
        <span className="text-muted-foreground">Contributors</span>
      </div>
    </div>
  )
}

Label

Children sit in the middle of the line, with the line filling the space on both sides.

Or continue with

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

export function SeparatorLabel() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Button>Continue with email</Button>
      <Separator>Or continue with</Separator>
      <div className="grid grid-cols-2 gap-2">
        <Button variant="outline">GitHub</Button>
        <Button variant="outline">Google</Button>
      </div>
    </div>
  )
}

Align

align moves the label to the start or end, which suits section and date headers. Icons are sized to the text.

Today

Yesterday

Last week

import { IconCalendar } from "@tabler/icons-react"

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

export function SeparatorAlign() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Separator align="start">
        <IconCalendar aria-hidden="true" />
        Today
      </Separator>
      <Separator>Yesterday</Separator>
      <Separator align="end">Last week</Separator>
    </div>
  )
}

Vertical label

A vertical separator with a label keeps the text upright and draws the line above and below it.

Drop a file here

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

export function SeparatorVerticalLabel() {
  return (
    <div className="flex items-stretch gap-4">
      <div className="flex w-32 flex-col gap-2">
        <Button variant="outline">Upload file</Button>
        <Button variant="outline">Browse library</Button>
      </div>
      <Separator orientation="vertical">or</Separator>
      <div className="flex w-32 items-center justify-center rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
        Drop a file here
      </div>
    </div>
  )
}

Decorative

decorative hides a purely visual line from screen readers, so they don't announce a separator between rows that already read well on their own.

Subtotal$48.00

Shipping$4.00

Total$52.00

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

export function SeparatorDecorative() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3 rounded-xl border p-4 text-sm">
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground">Subtotal</span>
        <span className="tabular-nums">$48.00</span>
      </div>
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground">Shipping</span>
        <span className="tabular-nums">$4.00</span>
      </div>
      <Separator decorative />
      <div className="flex items-center justify-between font-medium">
        <span>Total</span>
        <span className="tabular-nums">$52.00</span>
      </div>
    </div>
  )
}

Inline

Use render to output a <span> where a <div> isn't allowed, like inside a paragraph.

Ada ParkOct 5, 20264 min read

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

export function SeparatorRender() {
  return (
    <p className="text-sm text-muted-foreground">
      <span className="inline-flex h-4 items-center gap-2 align-middle">
        <span>Ada Park</span>
        <Separator orientation="vertical" decorative render={<span />} />
        <time dateTime="2026-10-05">Oct 5, 2026</time>
        <Separator orientation="vertical" decorative render={<span />} />
        <span>4 min read</span>
      </span>
    </p>
  )
}

Long content

Long labels wrap and unbroken strings break, while a short stretch of line stays visible on each side.

Messages before you joined the channel are kept for ninety days

https://hextaui.com/docs/components/separator/very-long-anchor

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

export function SeparatorLongContent() {
  return (
    <div className="flex w-full max-w-72 flex-col gap-6">
      <Separator>
        Messages before you joined the channel are kept for ninety days
      </Separator>
      <Separator align="start">
        https://hextaui.com/docs/components/separator/very-long-anchor
      </Separator>
    </div>
  )
}

Right to left

Start and end follow the reading direction.

اليوم

الوثائق

المكونات

المصدر

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

export function SeparatorRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6 text-sm">
      <Separator align="start">اليوم</Separator>
      <div className="flex h-5 items-center gap-4">
        <a href="#">الوثائق</a>
        <Separator orientation="vertical" />
        <a href="#">المكونات</a>
        <Separator orientation="vertical" />
        <a href="#">المصدر</a>
      </div>
    </div>
  )
}

Accessibility

A plain separator has role="separator" and aria-orientation, like an <hr>.
With decorative, it gets role="none" and screen readers skip it.
A separator with a label has no role. The separator role would make its text presentational, so the label is read as plain text instead.

API reference

Built on the Base UI Separator. Renders a <div> and accepts its attributes.

Separator

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`decorative`Hide the line from screen readers when it is only visual.	`boolean`	`false`
`children`A label drawn in the line. Leave it out for a plain line.	`ReactNode`	`–`
`align`Where the label sits along the line.	`"start" \| "center" \| "end"`	`"center"`
`className`	`string \| (state) => string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Attribute	Description
`data-slot="separator"`	Target separators in CSS.
`data-orientation`	"horizontal" or "vertical".
`data-content`	Present when the separator has a label.
`data-align`	The label's alignment, when there is a label.
`data-slot="separator-label"`	The element that wraps the label.