Componentnavigation

Separator

Horizontal or vertical dashed divider.

Preview

Live Preview

SECTION A

SECTION B (DASHED)

SOLID RULE

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add separator

Or install the full npm package:

npm install bigbullui

Usage

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

<Separator dashed={true} />

Source code

separator.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
  orientation?: "horizontal" | "vertical";
  dashed?: boolean;
  className?: string;
}

export function Separator({
  orientation = "horizontal",
  dashed = true,
  className,
  ...props
}: SeparatorProps) {
  const isHorizontal = orientation === "horizontal";

  return (
    <div
      role="separator"
      aria-orientation={orientation}
      className={cn(
        "shrink-0",
        dashed ? "border-dashed" : "border-solid",
        isHorizontal
          ? "h-0 w-full border-t border-border"
          : "h-full min-h-4 w-0 border-l border-border",
        className
      )}
      {...props}
    />
  );
}

Props

Prop	Type	Description
orientation	"horizontal" \| "vertical"	Line orientation (default 'horizontal').
dashed	boolean	Whether border is dashed (default true).