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"
<Separator />
RTL Support
Set the direction once with DirectionProvider (or <html dir="rtl">) and the separator follows it. No dir prop or rtl: classes needed.
Motion
Use MotionSeparator for a smooth expand-from-center animation powered by motion. Horizontal separators scale along the X axis, vertical ones along Y.
motion package. Use MotionSeparator instead of Separator. Same props. The regular Separator is perfectly fine - this is an optional enhancement.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 -> <html dir>). |
className | string | - | Additional CSS class names |
...props | React.HTMLProps<HTMLHRElement> | - | Additional props to spread to the hr element |
MotionSeparator
Expands from center with springBouncy transition: scales along X for horizontal, Y for vertical. Renders a div with role="separator" instead of hr. Requires the motion package.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Controls the orientation and animation axis |
dir | 'ltr' | 'rtl' | - | Text direction override |
className | string | - | Additional CSS class names |
...props | React.HTMLAttributes<HTMLDivElement> | - | Additional props to spread to the div element |