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
packages.sections.api
Component props and API reference 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. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.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 | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
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.