Separator

Visual dividing line.

stableBase UI Separator

Preview

PRIZM 4.0

A DSTA design system.

Docs

Components

Source

Code

tsx

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

export function Example() {
  return (
    <>
      <div className="text-sm">
        <div className="font-medium">PRIZM 4.0</div>
        <div className="text-fg-muted">A DSTA design system.</div>
      </div>
      <Separator className="my-4" />
      <div className="flex items-center gap-4 text-sm text-fg-muted">
        <span>Docs</span>
        <Separator orientation="vertical" className="h-4" />
        <span>Components</span>
      </div>
    </>
  );
}

Props

Prop	Type	Default	Description
orientation	`"horizontal" \| "vertical"`	"horizontal"	Direction of the line.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Built on Base UI Separator. Adds `role="separator"` and correct `aria-orientation`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/separator.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

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

export function Separator({
  className,
  orientation = "horizontal",
  ...props
}: ComponentPropsWithoutRef<typeof BaseSeparator>) {
  return (
    <BaseSeparator
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className,
      )}
      {...props}
    />
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmSeparator (extends Separator). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmSeparator;

PrizmSeparator()
PrizmSeparator(Orientation orientation)

Prop	Type	Default	Description
orientation	`ObjectProperty<Orientation>`	HORIZONTAL	Inherited from Separator; HORIZONTAL or VERTICAL.

Thin subclass of the stock Separator; the rule is restyled to a 1px -color-border line (no extra padding) via the .prizm-separator rules in prizm.css. Mirrors components/ui/separator.tsx.