← ui

separator

ui

a hairline between two things, across or down

npx shadcn add @ag/separator
Already installed? Preview an update
npx shadcn add @ag/separator --dry-run

Your installed source stays unchanged until you update it. How updates work

Latest changes · 2026-10-10
  • New: a hairline across or down (Base UI's separator): the page's hairline plain, the glass's lit line in glass.
Updated 2026-10-10 · release notes

also called divider

shelf controls

uses material

used by components, resizable

the demo above, verbatim

separator.demo.tsx
"use client"

import { Sample } from "@/app/samples"
import { MaterialProvider } from "@/registry/base-nova/ui/material"
import { Separator } from "@/registry/base-nova/ui/separator"

// #region lines
function Lines() {
  return (
    <div className="flex w-64 flex-col gap-3 text-sm">
      <span>account</span>
      <Separator />
      <div className="flex h-5 items-center gap-3 text-current/70">
        <span>profile</span>
        <Separator orientation="vertical" />
        <span>billing</span>
        <Separator orientation="vertical" />
        <span>keys</span>
      </div>
    </div>
  )
}
// #endregion

export default function SeparatorDemo() {
  return (
    <div className="space-y-8">
      <Sample name="materials" title="across and down" with="lines">
        <div className="grid gap-4 sm:grid-cols-2">
          <Lines />
          <MaterialProvider material="glass">
            <div className="rounded-xl bg-[url(/lightbox/river.jpg)] bg-cover bg-center p-6 text-white">
              <Lines />
            </div>
          </MaterialProvider>
        </div>
      </Sample>
      <Sample name="lines" glance title="between items" with="lines">
        <Lines />
      </Sample>
    </div>
  )
}

the source, every file an install writes

separator.tsx
"use client"

import { Separator as BaseSeparator } from "@base-ui/react/separator"
import type * as React from "react"
import { cn } from "@/lib/utils"
import { type Material, useMaterial } from "@/registry/base-nova/ui/material"

// A hairline between two things (Base UI's separator: role and orientation said to a
// screen reader). Plain, the page's own hairline tier. `material="glass"`: the line a
// glass draws between its own surfaces, lit where its rim is lit (the start, top left)
// and fading along its length, the hairline under a glass pane's front surface.

export type SeparatorProps = Omit<
  React.ComponentProps<typeof BaseSeparator>,
  "className"
> & {
  material?: Material
  className?: string
}

export function Separator({
  orientation = "horizontal",
  material,
  className,
  ...props
}: SeparatorProps) {
  const m = useMaterial(material)
  const across = orientation === "horizontal"
  return (
    <BaseSeparator
      data-slot="separator"
      data-material={m}
      orientation={orientation}
      className={cn(
        "shrink-0",
        across ? "h-px w-full" : "w-px self-stretch",
        m === "glass"
          ? across
            ? "bg-[linear-gradient(90deg,color-mix(in_oklab,var(--glass-rim-ink,white)_32%,transparent),color-mix(in_oklab,var(--glass-rim-ink,white)_6%,transparent))]"
            : "bg-[linear-gradient(180deg,color-mix(in_oklab,var(--glass-rim-ink,white)_32%,transparent),color-mix(in_oklab,var(--glass-rim-ink,white)_6%,transparent))]"
          : "bg-foreground/10",
        className,
      )}
      {...props}
    />
  )
}