---
title: Separator
description: Visually divide content sections

links:
  rac: Separator
  source: separator/separator.tsx
  styles: separator.css
  storybook: Components/Layout/Separator
  figma: true
---

## Usage

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

<ComponentPreview
  name="separator-basic"
/>

## Examples

### Variants

<ComponentPreview
  name="separator-variants"
/>

### With Surface

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

<ComponentPreview
  name="separator-with-surface"
/>

### Vertical

<ComponentPreview
  name="separator-vertical"
/>

### With Content

<ComponentPreview
  name="separator-with-content"
/>

### Render Function

<ComponentPreview
  name="separator-render-function"
/>

## Customization

### Tailwind CSS

<ComponentPreview name="separator-custom-styles" />

### Global CSS

To customize the Separator component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

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

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

## Styling Reference

HeroUI follows the [BEM](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/separator.css)):

#### Base & Orientation Classes [!toc]
- `.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 [!toc]
- `.separator--default` - Default variant with standard contrast
- `.separator--secondary` - Secondary variant with medium contrast
- `.separator--tertiary` - Tertiary variant with subtle contrast

## API Reference

### Separator

| 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.|

## Related Components

<RelatedComponents component="separator" />
