Separator

Usage

import { Separator } from '@heroui/react';

Examples

Variants

With Surface

The Separator component adapts to different surface backgrounds for better visibility.

Vertical

With Content

Render Function

Customization

Tailwind CSS

Global CSS

To customize the Separator component classes, you can use the @layer components directive. Learn more.

@layer components {
  .separator {
    @apply bg-accent h-[2px];
  }

  .separator--vertical {
    @apply bg-accent w-[2px];
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Separator component uses these CSS classes (View source styles):

Base & Orientation Classes

• .separator - Base separator styles with default horizontal orientation
• .separator--horizontal - Horizontal orientation (full width, 1px height)
• .separator--vertical - Vertical orientation (full height, 1px width)

Variant Classes

• .separator--default - Default variant with standard contrast
• .separator--secondary - Secondary variant with medium contrast
• .separator--tertiary - Tertiary variant with subtle contrast

API Reference

Separator

Related Components