# Shadcn Separator

> 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.

Source: https://designrevision.com/components/separator

The **Shadcn Separator** is a thin divider line — the shadcn/ui name for what other libraries call a **Divider**. It is built on <a href="https://www.radix-ui.com/primitives/docs/components/separator" rel="nofollow">Radix</a>, 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 <a href="https://www.w3.org/WAI/ARIA/apg/patterns/" rel="nofollow">ARIA separator role</a> — 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:

```tsx
<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:

```tsx
<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).

## Installation

### separator

**Install:**

```bash
npx shadcn@latest add @designrevision/separator
```

**Dependencies:** @radix-ui/react-separator, utils

**Usage & accessibility:** A Radix separator — a thin divider line. orientation is "horizontal" (default) or "vertical" (it fills the cross-axis of its parent). decorative defaults to true (hidden from screen readers). Color it with a bg-* class.

```tsx
// 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.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-demo-01
```

**Dependencies:** separator

```tsx
// 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.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-label-01
```

**Dependencies:** separator

```tsx
// 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.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-list-01
```

**Dependencies:** separator

```tsx
// components/ui/separator-list-01.tsx
import { Separator } from "@/components/ui/separator"

const settings = [
  { label: "Profile", value: "Ada Lovelace" },
  { label: "Email", value: "ada@example.com" },
  { 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.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-stats-01
```

**Dependencies:** separator

```tsx
// 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.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-footer-01
```

**Dependencies:** separator

```tsx
// 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.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-styled-01
```

**Dependencies:** separator

```tsx
// 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>
  )
}
```