Separator
A separator component for visually dividing content. Built on Radix UI primitives with multiple variants, orientations, and optional content display. Perfect for section dividers and visual organization.
Installation
Import
Usage
Use Separator to visually divide content sections. Choose appropriate variant based on visual hierarchy. Use withContent for section titles or icons. Use decorative=false for screen reader announcements. Use animated sparingly for emphasis. Size separators appropriately for their context.
Design Guidelines
Maintain consistent separator styling throughout your application. Use appropriate variants for different contexts. Keep content in separators concise. Use animation sparingly. Position separators clearly to divide content sections.
Basic Usage
Simple horizontal and vertical separators
Variants
Different separator variants
With Content
Separator with centered content
Sizes
Separators with different sizes
Animated Separator
Separator with animation
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Orientation of the separator |
variant | "solid" | "dashed" | "dotted" | "gradient" | "solid" | Visual variant of the separator |
size | "sm" | "md" | "lg" | "md" | Size/thickness of the separator |
decorative | boolean | true | Whether the separator is decorative (hidden from screen readers) |
withContent | boolean | false | Whether to display content in the center of the separator |
children | React.ReactNode | — | Content to display in the center (when withContent=true) |
animated | boolean | false | Whether to animate the separator (works best with gradient variant) |
animationDuration | number | 1000 | Animation duration in milliseconds |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
Separators include proper ARIA attributes. Use decorative=false and provide aria-label for non-decorative separators. Screen readers will skip decorative separators. Ensure sufficient color contrast for all variants.