Skip to content
Prosper Design System

Separator

Source: packages/shared/components/ui/separator.tsx Primitives: @radix-ui/react-separator

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

Preview

Prosper Design System

Components, tokens, and patterns.

Components
Tokens
Patterns

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Direction of the separator
decorativebooleantrueIf true, not exposed to assistive tech
classNamestring—Additional classes

Default Styling

  • Color: bg-border
  • Horizontal: h-px w-full
  • Vertical: h-full w-px

Usage Example

{/* Between form sections */}
<div className="space-y-6">
  {/* ... fields ... */}
  <Separator />
  {/* ... more fields ... */}
</div>

Used In

  • Admin: JobForm (between form sections and action buttons)

Notes

  • Used with default styling in the admin app — no className overrides.