Buttons

Data Display

Feedback

Forms

Layout

Media

Navigation

Overlays

Pickers

Separator

A separator element accessible to screen readers. Built with Base UI and Tailwind CSS. Copy-paste ready.

coss ui

Unstyled, accessible primitives for fast product UI and design systems.

Blog

Docs

Source

Releases

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

export default function Particle() {
  return (
    <div className="max-w-72">
      <div className="flex flex-col gap-1">
        <h4 className="font-medium text-sm">coss ui</h4>
        <p className="text-muted-foreground text-sm">
          Unstyled, accessible primitives for fast product UI and design
          systems.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex items-center gap-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
        <Separator orientation="vertical" />
        <div>Releases</div>
      </div>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add @cnippet/separator

Usage

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

<Separator />

Examples

Vertical Separator

A vertical orientation separator for dividing inline content placed side by side.

Blog

Docs

Source

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

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <div className="flex h-5 items-center gap-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  );
}

Vertical With Groups

Uses multiple vertical separators to divide a row of grouped items such as a toolbar or navigation link strip.

SettingsManage preferences

AccountProfile & security

HelpSupport & docs

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

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <div className="flex items-center gap-4 text-sm">
        <div className="flex flex-col gap-1">
          <span className="font-medium">Settings</span>
          <span className="text-muted-foreground text-xs">
            Manage preferences
          </span>
        </div>
        <Separator className="[&]:self-auto! h-8" orientation="vertical" />
        <div className="flex flex-col gap-1">
          <span className="font-medium">Account</span>
          <span className="text-muted-foreground text-xs">
            Profile & security
          </span>
        </div>
        <Separator className="[&]:self-auto! h-8" orientation="vertical" />
        <div className="flex flex-col gap-1">
          <span className="font-medium">Help</span>
          <span className="text-muted-foreground text-xs">Support & docs</span>
        </div>
      </div>
    </div>
  );
}

Horizontal Separator

A horizontal orientation separator that spans the full width of its container to divide stacked content sections.

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

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

export function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-xs flex-col gap-2 text-sm">
      <dl className="flex items-center justify-between">
        <dt className="font-medium">Item 1</dt>
        <dd className="text-muted-foreground">Value 1</dd>
      </dl>
      <Separator />
      <dl className="flex items-center justify-between">
        <dt className="font-medium">Item 2</dt>
        <dd className="text-muted-foreground">Value 2</dd>
      </dl>
      <Separator />
      <dl className="flex items-center justify-between">
        <dt className="font-medium">Item 3</dt>
        <dd className="text-muted-foreground">Value 3</dd>
      </dl>
    </div>
  );
}

With Text Label

A horizontal separator with a text label centered in the middle, commonly used as an "or" divider in authentication forms.

or continue with

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

export function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-xs flex-col gap-6">
      <div className="relative">
        <Separator />
        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-2 text-muted-foreground text-xs">
          or continue with
        </span>
      </div>
    </div>
  );
}

Order Summary

Uses multiple horizontal separators between line items in an order summary layout to visually distinguish each row.

Order Summary

Subtotal: $49.00

Discount: -$5.00

Tax: $3.52

Total: $47.52

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

export function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-xs flex-col gap-2 text-sm">
      <p className="font-medium">Order Summary</p>
      <Separator />
      <dl className="flex items-center justify-between gap-20">
        <dt className="text-muted-foreground">Subtotal</dt>
        <dd>$49.00</dd>
      </dl>
      <dl className="flex items-center justify-between">
        <dt className="text-muted-foreground">Discount</dt>
        <dd className="text-success">-$5.00</dd>
      </dl>
      <dl className="flex items-center justify-between">
        <dt className="text-muted-foreground">Tax</dt>
        <dd>$3.52</dd>
      </dl>
      <Separator />
      <dl className="flex items-center justify-between font-medium">
        <dt>Total</dt>
        <dd>$47.52</dd>
      </dl>
    </div>
  );
}

Compact profile stat metrics (followers, following, posts, likes) separated by short vertical separators in a single row.

2.4kFollowers

148Following

37Posts

9.1kLikes

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

export default function Particle() {
  return (
    <div className="flex items-center gap-3 text-sm">
      <div className="flex items-center gap-1.5">
        <span className="font-semibold">2.4k</span>
        <span className="text-muted-foreground">Followers</span>
      </div>
      <Separator className="h-4" orientation="vertical" />
      <div className="flex items-center gap-1.5">
        <span className="font-semibold">148</span>
        <span className="text-muted-foreground">Following</span>
      </div>
      <Separator className="h-4" orientation="vertical" />
      <div className="flex items-center gap-1.5">
        <span className="font-semibold">37</span>
        <span className="text-muted-foreground">Posts</span>
      </div>
      <Separator className="h-4" orientation="vertical" />
      <div className="flex items-center gap-1.5">
        <span className="font-semibold">9.1k</span>
        <span className="text-muted-foreground">Likes</span>
      </div>
    </div>
  );
}

Section Heading with Line

A left-aligned section title with a horizontal separator extending to fill the remaining width — a common content grouping pattern.

Recent Activity

Pushed 3 commits to main branch

Opened pull request #45

Commented on issue #38

Repositories

ui-cnippet (public)

design-system (private)

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

export default function Particle() {
  return (
    <div className="w-full max-w-xs space-y-4">
      <div className="flex items-center gap-3">
        <span className="shrink-0 font-medium text-sm">Recent Activity</span>
        <Separator />
      </div>
      <div className="space-y-1.5 text-muted-foreground text-sm">
        <p>Pushed 3 commits to main branch</p>
        <p>Opened pull request #45</p>
        <p>Commented on issue #38</p>
      </div>
      <div className="flex items-center gap-3">
        <span className="shrink-0 font-medium text-sm">Repositories</span>
        <Separator />
      </div>
      <div className="space-y-1.5 text-muted-foreground text-sm">
        <p>ui-cnippet (public)</p>
        <p>design-system (private)</p>
      </div>
    </div>
  );
}

Footer Links

Small navigation links (Privacy, Terms, Cookies…) separated by hairline vertical dividers, as commonly seen in page footers.

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

const links = ["Privacy", "Terms", "Cookies", "Status", "Contact"];

export default function Particle() {
  return (
    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-muted-foreground text-xs">
      {links.map((link, i) => (
        <div className="flex items-center gap-2" key={link}>
          {i > 0 && <Separator className="h-3" orientation="vertical" />}
          <button
            className="transition-colors hover:text-foreground"
            type="button"
          >
            {link}
          </button>
        </div>
      ))}
    </div>
  );
}

Card Section Dividers

Horizontal separators between rows inside a bordered card, cleanly dividing settings or menu sections without extra spacing.

Profile

Manage your personal details and preferences.

Security

Update password, 2FA, and login sessions.

Notifications

Choose what you get notified about.

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

const sections = [
  {
    description: "Manage your personal details and preferences.",
    title: "Profile",
  },
  {
    description: "Update password, 2FA, and login sessions.",
    title: "Security",
  },
  {
    description: "Choose what you get notified about.",
    title: "Notifications",
  },
];

export default function Particle() {
  return (
    <div className="w-64 overflow-hidden rounded-lg border">
      {sections.map(({ description, title }, i) => (
        <div key={title}>
          {i > 0 && <Separator />}
          <div className="p-4">
            <p className="font-medium text-sm">{title}</p>
            <p className="mt-0.5 text-muted-foreground text-xs">
              {description}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

A rich-text-style toolbar with bold, italic, and underline actions in one group, alignment in another, and a link button in a third — each group separated by a vertical separator.

import {
  AlignCenterIcon,
  AlignLeftIcon,
  AlignRightIcon,
  BoldIcon,
  ItalicIcon,
  LinkIcon,
  UnderlineIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";

export default function Particle() {
  return (
    <div className="flex items-center gap-1 rounded-lg border p-1">
      <Button aria-label="Bold" size="icon" variant="ghost">
        <BoldIcon aria-hidden="true" className="size-4" />
      </Button>
      <Button aria-label="Italic" size="icon" variant="ghost">
        <ItalicIcon aria-hidden="true" className="size-4" />
      </Button>
      <Button aria-label="Underline" size="icon" variant="ghost">
        <UnderlineIcon aria-hidden="true" className="size-4" />
      </Button>
      <Separator className="mx-1 h-5" orientation="vertical" />
      <Button aria-label="Align left" size="icon" variant="ghost">
        <AlignLeftIcon aria-hidden="true" className="size-4" />
      </Button>
      <Button aria-label="Align center" size="icon" variant="ghost">
        <AlignCenterIcon aria-hidden="true" className="size-4" />
      </Button>
      <Button aria-label="Align right" size="icon" variant="ghost">
        <AlignRightIcon aria-hidden="true" className="size-4" />
      </Button>
      <Separator className="mx-1 h-5" orientation="vertical" />
      <Button aria-label="Insert link" size="icon" variant="ghost">
        <LinkIcon aria-hidden="true" className="size-4" />
      </Button>
    </div>
  );
}

On This Page

Installation Usage Examples Vertical Separator Vertical With Groups Horizontal Separator With Text Label Order Summary Social Stats Bar Section Heading with Line Footer Links Card Section Dividers Toolbar with Separator Groups