# Separator · HeroUI

> Visually divide content sections

- Page: https://jiguang132.com/systems/heroui/docs/components/separator
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

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

### Usage


> Example `separator-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/separator


### Vertical


> Example `separator-vertical`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/separator


### With Content


> Example `separator-with-content`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/separator


### Variants


> Example `separator-variants`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/separator


### With Surface

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


> Example `separator-with-surface`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/separator


### Custom Render Function


> Example `separator-custom-render-function`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/separator


## Styling

### Passing Tailwind CSS classes

```tsx
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](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];
  }
}
```

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

---

Index of all JGuang resources: https://jiguang132.com/llms.txt