?
?
?
Design sync
3 people active now
12
Tasks
98%
Ready
4m
Avg reply
Maya moved wireframesNow
Noah resolved comments2m ago
Installation
npx shadcn@latest add @iconiq/r-separatorProps
Separator
4 props
Horizontal or vertical separator with the same Iconiq line, dashed, and dotted variants layered over Radix UI primitives.
orientation
"horizontal" | "vertical"Default
"horizontal"Controls whether the divider spans across the inline axis or separates items inside a fixed-height row.
variant
"line" | "dashed" | "dotted"Default
"line"Chooses the visual treatment. The default line variant renders a solid border-token rule, dashed repeats the token as short strokes, and dotted uses native dotted border rendering.
decorative
booleanDefault
trueRemoves the separator from the accessibility tree when true. Set it to false only when the divider communicates structure that needs to be announced.
className
stringMerged onto the primitive root so local width, height, margin, color, or placement can be adjusted without changing the component file.
Notes
Current install target: Radix UI.
Dependencies declared by this registry entry: @radix-ui/react-separator.
Vertical separators rely on their parent for height, so place them inside a row with an explicit height or pass a height class.
The dashed variant uses background gradients so horizontal and vertical strokes keep the same dash rhythm. The dotted variant uses border rendering to keep dots crisp at one pixel.
Installs a Radix separator with the same orientation, decorative, className, and variant API as the Base UI version.
Uses the Radix separator primitive under the same Iconiq line, dashed, and dotted visual treatments.