Skip to content
EMBOSS
Docs menu

Separator

A machined score line — a hairline groove whose catch-light follows the global light source.

@emboss/separator

Input stage

Gain, phase, high-pass.

SoloMuteArm

Installation

pnpm dlx shadcn@latest add @emboss/separator

Usage

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

export function Example() {
  return <Separator className="my-4" />;
}

API reference

Separator

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Direction of the score line.

Source

View source — separator.tsx
separator.tsx
"use client";

import { Separator as BaseSeparator } from "@base-ui/react/separator";
import { cn } from "@/lib/utils";

/**
 * A machined score line: a hairline groove with a catch-light that follows
 * the global light source.
 *
 * @example
 * <Separator className="my-4" />
 */
function Separator({
  className,
  orientation = "horizontal",
  ...props
}: React.ComponentProps<typeof BaseSeparator>) {
  return (
    <BaseSeparator
      data-slot="separator"
      orientation={orientation}
      className={cn(
        "shrink-0 bg-edge-line shadow-[calc(var(--away-x)*1px)_calc(var(--away-y)*1px)_0_var(--edge-hi)]",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className,
      )}
      {...props}
    />
  );
}

export { Separator };

Related

CardA surface for grouped content with three seatings: raised off the page, flush with it, or recessed into a well.