Skip to main content

Separator

StorybookView in Storybook

Explore interactive examples and all component variations in our Storybook.

The Separator component provides a visual divider to separate content sections. Built on Radix UI, it supports both horizontal and vertical orientations with accessibility features. Perfect for organizing content, creating visual hierarchy, and improving readability in layouts.

Basic Usage​

View in Storybook

Radix Primitives

An open-source UI component library.

Next.js

The React framework for production.

Vertical Separator​

Blog
Docs
Source

Card Sections​

Account Settings

Manage your account preferences and security settings.

Profile Information

Update your personal information and profile picture.

Privacy Settings

Control who can see your information and activity.

Notifications

Choose what notifications you want to receive.

User Profile Layout​

JS

John Smith

Frontend Developer

About

Passionate developer with 5+ years of experience in React and TypeScript.

Skills

ReactTypeScriptNode.js

Navigation

Dashboard

Projects

Tasks

Settings

Profile

Preferences

Main Content

This is the main content area. The vertical separator creates a clear division between the sidebar and the main content.

Custom Styling​

Default Separator

Thick Separator

Dashed Separator

Gradient Separator

Vertical Separators with Custom Heights

Item 1
Item 2
Item 3
Item 4

Properties​

Separator​

PropertyTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"The orientation of the separator.
decorativebooleantrueWhether the separator is decorative (not focusable).
classNamestring-Additional CSS classes for custom styling.

Accessibility​

The Separator component includes comprehensive accessibility features:

  • Semantic HTML - Uses proper ARIA separator role
  • Screen Reader Support - Properly announced as a separator element
  • Decorative by Default - Non-focusable decorative separators by default
  • Keyboard Navigation - Can be made focusable when decorative={false}
  • Visual Clarity - Clear visual distinction between content sections

Common Use Cases​

The Separator component is perfect for:

  • Content Organization - Dividing sections in articles, forms, and layouts
  • Navigation Menus - Separating navigation items and menu sections
  • Card Layouts - Creating sections within cards and panels
  • Sidebar Navigation - Organizing navigation groups and categories
  • User Profiles - Separating different information sections
  • Settings Pages - Dividing configuration groups and options
  • Data Lists - Creating visual breaks between list items or groups

Best Practices​

  1. Consistent Spacing - Use consistent margins around separators
  2. Appropriate Orientation - Use horizontal for content sections, vertical for inline items
  3. Visual Hierarchy - Use separators to enhance, not overwhelm content structure
  4. Accessibility - Keep decorative separators non-focusable for better screen reader experience
  5. Custom Styling - Use className to match your design system colors and thickness
  6. Semantic Usage - Use separators to logically group related content
  7. Responsive Design - Consider how separators behave on different screen sizes
  8. Color Contrast - Ensure separators have appropriate contrast for visibility