GitHub

Separator

Visually or semantically separates content.

Loading
Loading...
import { Separator } from "@/components/ui/separator";
 
export function SeparatorDemo() {
  return (
    <div className="flex max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1.5">
        <div className="font-medium leading-none">shadcn/ui</div>
        <div className="text-muted-foreground">
          The Foundation for your Design System
        </div>
      </div>
      <Separator />
      <div>
        A set of beautifully designed components that you can customize, extend,
        and build on.
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/separator"

Usage

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