Skip to content

Separator

In the app

A soft hairline, horizontal or vertical. Decorative by default so screen readers skip it.

@varick/ui/components/separatorAdded 2 Sept 2026

Integrations
Slack
HubSpot
Salesforce

Usage

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

export function Example() {
  return (
    <>
      <Separator />
      <Separator orientation="vertical" />
    </>
  );
}

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Vertical stretches to the flex row height.
decorativebooleantruefalse gives it role="separator" and aria-orientation.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.integration-divider { border-top: 1px solid var(--hairline-soft); }
.dropdown-sep { border-top: 1px solid var(--hairline-soft); margin: 4px 2px; }