separator
Visually or semantically separates content.
Philosophy
Visual hierarchy needs breathing room. The Separator creates semantic and visual boundaries between content sections. We expose orientation as the only meaningful prop because a divider's job is to divide — its value comes from where you place it, not how you configure it.
Installation
npx @gentleduck/cli add separator
npx @gentleduck/cli add separator
Usage
import { Separator } from "@/components/ui/separator"import { Separator } from "@/components/ui/separator"<Separator /><Separator />API Reference
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Controls the orientation of the separator line |
dir | 'ltr' | 'rtl' | -- | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional CSS class names |
...props | React.HTMLProps<HTMLHRElement> | -- | Additional props to spread to the hr element |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.