Separator
A hand-drawn rule that splits content, with or without a label.
Variants
solid
dashed
double
Vertical
SketchTraceInkErase
With a label
Installation
Add Separator with the shadcn CLI.
npx shadcn@latest add https://sketchcn.chuwii.com/r/separator.json
Examples
Labelled dividers, inline meta rows, and section breaks.
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>
  );
}