Separator

Import

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

Usage

Vertical

With Content

Variants

With Surface

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

Custom Render Function

Styling

Passing Tailwind CSS classes

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

function CustomSeparator() {
  return (
    <Separator className="my-8 bg-linear-to-r from-transparent via-default-500 to-transparent" />
  );
}

Customizing the component classes

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];
  }
}

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 Props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	The orientation of the separator
variant	'default' | 'secondary' | 'tertiary'	'default'	The visual variant of the separator
className	string	-	Additional CSS classes
render	DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>	-	Overrides the default DOM element with a custom render function.