Shadcn Separator

View as Markdown Open in ChatGPT Open in Claude

Free shadcn/ui separator (divider) component for React — built on Radix. Horizontal and vertical orientations, a labeled "or continue with" divider, section dividers, and styled variants, with proper role="separator" accessibility.

Installation

1 Configure registry — once per project

{
  "registries": {
    "@designrevision": "https://registry.designrevision.com/r/{name}.json"
  }
}

Add to your existing components.json. Requires shadcn/ui v2.3+.

2 Install the component

Props

No props documented yet.

Copied!

components/ui/separator.tsx

"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props}
    />
  )
}

export { Separator }

Examples

Horizontal & vertical

The canonical separator — a horizontal divider plus vertical separators between inline links.

Props

No props documented yet.

Copied!

components/ui/separator-demo-01.tsx

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

export default function SeparatorDemo01() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-1">
        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
        <p className="text-muted-foreground text-sm">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

Labeled divider

An **"Or continue with"** divider — a label masking the middle of the line, the classic auth-form pattern.

Props

No props documented yet.

Copied!

components/ui/separator-label-01.tsx

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

export default function SeparatorLabel01() {
  return (
    <div className="w-full max-w-sm py-2">
      <div className="relative">
        <Separator />
        <span className="bg-background text-muted-foreground absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-2 text-xs uppercase">
          Or continue with
        </span>
      </div>
    </div>
  )
}

Section dividers

Horizontal separators between the rows of a settings card.

Props

No props documented yet.

Copied!

components/ui/separator-list-01.tsx

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

const settings = [
  { label: "Profile", value: "Ada Lovelace" },
  { label: "Email", value: "[email protected]" },
  { label: "Plan", value: "Pro" },
  { label: "Billing", value: "Visa •••• 4242" },
]

export default function SeparatorList01() {
  return (
    <div className="bg-card text-card-foreground w-full max-w-sm rounded-lg border">
      <div className="px-4 py-3">
        <h4 className="text-sm font-medium">Account</h4>
      </div>
      <Separator />
      <div className="px-4">
        {settings.map((row, i) => (
          <div key={row.label}>
            <div className="flex items-center justify-between py-3 text-sm">
              <span className="text-muted-foreground">{row.label}</span>
              <span className="font-medium">{row.value}</span>
            </div>
            {i < settings.length - 1 && <Separator />}
          </div>
        ))}
      </div>
    </div>
  )
}

Vertical stat splits

A row of stat counters divided by vertical separators — the profile-header metrics pattern.

Props

No props documented yet.

Copied!

components/ui/separator-stats-01.tsx

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

const stats = [
  { label: "Posts", value: "1,240" },
  { label: "Followers", value: "350k" },
  { label: "Following", value: "80" },
]

export default function SeparatorStats01() {
  return (
    <div className="flex h-10 items-center gap-4 text-sm">
      {stats.map((stat, i) => (
        <div key={stat.label} className="flex h-full items-center gap-4">
          <div className="flex flex-col">
            <span className="font-semibold">{stat.value}</span>
            <span className="text-muted-foreground text-xs">{stat.label}</span>
          </div>
          {i < stats.length - 1 && <Separator orientation="vertical" />}
        </div>
      ))}
    </div>
  )
}

Footer nav splits

Footer links separated by vertical separators — a compact, inline nav bar.

Props

No props documented yet.

Copied!

components/ui/separator-footer-01.tsx

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

const links = ["About", "Blog", "Careers", "Terms", "Privacy"]

export default function SeparatorFooter01() {
  return (
    <div className="flex h-5 items-center gap-3 text-sm">
      {links.map((link, i) => (
        <div key={link} className="flex h-full items-center gap-3">
          <a href="#" className="text-muted-foreground hover:text-foreground">
            {link}
          </a>
          {i < links.length - 1 && <Separator orientation="vertical" />}
        </div>
      ))}
    </div>
  )
}

Styled & decorative

The separator is just a themeable element — colored, gradient-fade, thicker, and inset variants.

Props

No props documented yet.

Copied!

components/ui/separator-styled-01.tsx

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

export default function SeparatorStyled01() {
  return (
    <div className="w-full max-w-sm space-y-6">
      <div className="space-y-1.5">
        <p className="text-muted-foreground text-xs">Colored</p>
        <Separator className="bg-primary" />
      </div>
      <div className="space-y-1.5">
        <p className="text-muted-foreground text-xs">Gradient fade</p>
        <Separator className="bg-linear-to-r from-transparent via-border to-transparent" />
      </div>
      <div className="space-y-1.5">
        <p className="text-muted-foreground text-xs">Thicker</p>
        <Separator className="h-0.5! rounded-full" />
      </div>
      <div className="space-y-1.5">
        <p className="text-muted-foreground text-xs">Inset</p>
        <div className="px-10">
          <Separator />
        </div>
      </div>
    </div>
  )
}

The Shadcn Separator is a thin divider line — the shadcn/ui name for what other libraries call a Divider. It is built on Radix, so it works horizontally and vertically and carries the correct accessibility semantics, unlike a plain <hr>. The examples below cover both orientations, a labeled "or continue with" divider, section and stat dividers, and styled variants.

Separator or divider?

They are the same element. MUI and Chakra ship a Divider; shadcn — following Radix and the ARIA separator role — calls it Separator. If you came here looking for a shadcn divider, this is it. The only API you usually touch is orientation and a className.

Horizontal & vertical

By default the separator is horizontal — a full-width, 1px line:

<Separator />

For a vertical rule, set orientation="vertical". A vertical separator takes its height from its parent, so place it in a flex row that has a height:

<div className="flex h-5 items-center space-x-4 text-sm">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
  <Separator orientation="vertical" />
  <div>Source</div>
</div>

Why not just use `<hr>`?

A native <hr> only divides horizontally and comes with browser default styling you have to reset. The Separator:

works in both orientations,
is themed with your tokens (bg-border) and fully restyleable,
exposes the right role and aria-orientation through Radix.

By default it is decorative (decorative is true), meaning it is hidden from assistive technology — correct for a purely visual divide. When the separation is semantically meaningful (e.g. between two distinct groups of controls), pass decorative={false} so it is announced.

Styling

Because it is just an element, you restyle it with a className:

Color — bg-primary, or a fade with bg-linear-to-r from-transparent via-border to-transparent.
Thickness — the default h-px / w-px comes from a data-orientation variant, so override it with an important utility: className="h-0.5!".
Inset — give the parent horizontal padding so the line stops short of the edges.

The Styled & decorative example collects these in one place.

Common patterns

Labeled divider — center a label over the line with a masking background for the "OR CONTINUE WITH" login pattern (Labeled divider example).
Section dividers — drop a <Separator /> between rows of a card or menu (Section dividers example).
Inline splits — vertical separators between stats or footer links (Vertical stat splits and Footer nav splits examples).

Frequently asked questions

It is a thin divider line that visually or semantically separates content, built on @radix-ui/react-separator. It renders horizontally by default or vertically with orientation="vertical", and it sets the right accessibility role so assistive tech understands it as a separator. Use it between sections, between inline links, or anywhere you would reach for an

Yes — "separator" and "divider" are the same UI element. Libraries like MUI and Chakra call it Divider; shadcn (following Radix and the ARIA spec) calls it Separator. If you searched for a shadcn divider, this is it.

Pass orientation="vertical": . A vertical separator takes its height from its parent, so put it in a flex row with a set height — e.g. a div with flex h-5 items-center — and it will fill that height as a 1px-wide line between the items. The Horizontal & vertical and Vertical stat splits examples show it.

A plain

only works horizontally and carries fixed default styling. The Separator works in both orientations, is styled with your design tokens (bg-border), and — because it is built on Radix — exposes the correct role and aria-orientation. By default it is decorative (hidden from screen readers); set decorative={false} when the divide is semantically meaningful.

It is just an element, so style it with a className. Change the color with bg-* (e.g. bg-primary or a gradient), and override the thickness with an important utility like h-0.5! (the default h-px / w-px comes from a data-orientation variant, so the ! makes your value win). The Styled & decorative example shows colored, gradient-fade, thicker, and inset dividers.

Put the Separator and a label in a relative container and absolutely-center the label with a background that masks the line behind it (bg-background). That gives the familiar "—— OR CONTINUE WITH ——" look used on login forms. The Labeled divider example is ready to copy.

Shards Pro

Premium blocks & templates — early access and a launch discount.

You're on the list 🎉

Forge.new

Use all 300+ components, blocks and templates directly in your next project — built and deployed with AI.

Try Forge.new

Shadcn Separator

Installation

Props

Examples

Horizontal & vertical

Props

Labeled divider

Props

Section dividers

Props

Vertical stat splits

Props

Footer nav splits

Props

Styled & decorative

Props

Separator or divider?

Horizontal & vertical

Why not just use <hr>?

Styling

Common patterns

Frequently asked questions

Why not just use `<hr>`?