Separator

Overview

The Separator component provides a consistent way to create visual divisions between content sections. It's designed to improve content organization and readability with flexible orientation options and customizable styling.

Usage

import { Separator } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <p>Content above</p>
      <Separator />
      <p>Content below</p>
      
      <div className="flex">
        <p>Left content</p>
        <Separator orientation="vertical" />
        <p>Right content</p>
      </div>
    </div>
  );
}

Examples

Horizontal Separator

Standard horizontal separator for dividing content sections.

1
2
3
4
5
6
7
8
9

<div className="space-y-6">
  {/* Horizontal separator */}
  <div>
    <h4 className="text-sm font-medium leading-none text-center">Horizontal</h4>
    <div className="my-4">Some content above</div>
    <Separator />
    <div className="my-4">Some content below</div>
  </div>
</div>

Vertical Separator

Divider for horizontal layouts such as toolbars or side-by-side content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div>
  <div className="flex flex-col gap-4 justify-center items-center">
    <h4 className="text-sm font-medium leading-none">Vertical</h4>
  </div>
  <div className="space-y-6 flex flex-row gap-4 w-full">
    {/* Vertical separator */}

    <div className="flex flex-col gap-4">
      <div className="flex  gap-4">Left</div>
      <div className="flex  gap-4">Left Content</div>
      <div className="flex  gap-4">Left Content</div>
    </div>

    <Separator orientation="vertical" />
    <div className="flex flex-col gap-4">
      <div className="flex  gap-4">Right</div>
      <div className="flex  gap-4">Right Content</div>
      <div className="flex  gap-4">Right Content</div>
    </div>
  </div>
</div>

Decorative Separator

Shows a separator with custom decorative styling.

1
2
3
4
5
6
7
8
9

<div className="space-y-6">
  {/* Horizontal separator */}
  <div>
    <h4 className="text-sm font-medium leading-none text-center">Decorative</h4>
    <div className="my-4">Some content above</div>
    <Separator decorative />
    <div className="my-4">Some content below</div>
  </div>
</div>

Features

• Multiple Orientations: Horizontal and vertical separator options
• Customizable Styling: Extensive styling options through className prop
• Accessibility: Built-in accessibility support with proper ARIA attributes
• Responsive Design: Adapts to different screen sizes
• Dark Mode Support: Consistent appearance in light and dark themes
• Flexible Usage: Can be used in various layout contexts

Props

The component also accepts all standard HTML hr/div element props.

Variants

Horizontal

• Default orientation for most use cases
• Creates visual breaks between content sections
• Ideal for separating different content areas
• Uses semantic <hr> element

Vertical

• Divides content in horizontal layouts
• Useful for sidebar navigation or content columns
• Maintains consistent spacing
• Uses <div> element with vertical styling

Structure

The Separator component is a simple, self-contained component that renders as either an <hr> element (horizontal) or <div> element (vertical) with appropriate styling and accessibility attributes.

Styling

The Separator component includes default styling with:

• Consistent border styling and colors
• Proper spacing and margins
• Dark mode support
• Responsive design
• Focus states for accessibility
• Customizable through className prop

Custom Styling

You can customize the appearance using the className prop:

<Separator 
  orientation="horizontal"
  className="custom-separator-class border-2 border-blue-500"
/>

Accessibility

The Separator component is built with accessibility in mind:

• Semantic HTML: Uses appropriate HTML elements (<hr> for horizontal)
• ARIA Attributes: Proper ARIA labels for screen readers
• Screen Reader Support: Announces separator presence appropriately
• High Contrast: Maintains proper contrast ratios
• Focus Management: Proper focus handling in interactive contexts