Separator

A hand-drawn Base UI separator styled with shadcn conventions. It can run horizontally or vertically, and can carry a label in the middle.

Separator
A hand-drawn rule that splits content, with or without a label.
Variants
solid
dashed
double
Vertical
SketchTraceInkErase
With a label

Installation

npx shadcn@latest add https://sketchcn.chuwii.com/r/separator.json

Usage

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

<Separator />

Props

PropTypeDefaultDescription
variant"solid" | "dashed" | "double""solid"Stroke style. Double draws two parallel lines.
childrenReactNode—Label rendered in the middle, with a line drawn on each side.

orientation behaves as it does in the standard Separator; both directions are drawn with RoughJS.

The component also exports SEPARATOR_VARIANTS for building your own variant lists.

Examples

Sign-in divider

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

export function SignInForm() {
  return (
    <form className="flex w-full max-w-sm flex-col gap-3">
      <Input type="email" placeholder="[email protected]" />
      <Button type="submit">Continue with email</Button>
      <Separator>or</Separator>
      <Button variant="outline" type="button">
        Continue with GitHub
      </Button>
    </form>
  );
}

Inline meta row

12 sketches3 draftsUpdated today
import { Separator } from "@/components/ui/separator";

export function ProfileMeta() {
  return (
    <div className="flex h-6 items-center gap-3 text-muted-foreground text-sm">
      <span>12 sketches</span>
      <Separator orientation="vertical" />
      <span>3 drafts</span>
      <Separator orientation="vertical" />
      <span>Updated today</span>
    </div>
  );
}

Section break

Everything above is the rough draft.

Everything below is the inked version.

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

export function NoteSection() {
  return (
    <section className="flex w-full flex-col gap-4">
      <p className="text-sm">Everything above is the rough draft.</p>
      <Separator variant="double" />
      <p className="text-sm">Everything below is the inked version.</p>
    </section>
  );
}