);
}
```
### Vertical
```tsx
import {Separator} from "@heroui/react";
export function Vertical() {
return (
Blog
Docs
Source
);
}
```
### With Content
```tsx
import {Separator} from "@heroui/react";
const items = [
{
iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/bell-small.png",
subtitle: "Receive account activity updates",
title: "Set Up Notifications",
},
{
iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/compass-small.png",
subtitle: "Connect your browser to your account",
title: "Set up Browser Extension",
},
{
iconUrl:
"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/mint-collective-small.png",
subtitle: "Create your first collectible",
title: "Mint Collectible",
},
];
export function WithContent() {
return (
{items.map((item, index) => (
{item.title}
{item.subtitle}
{index < items.length - 1 && }
))}
);
}
```
### Variants
```tsx
import {Separator} from "@heroui/react";
export function Variants() {
return (
Default Variant
Secondary Variant
Tertiary Variant
);
}
```
### With Surface
The Separator component adapts to different surface backgrounds for better visibility.
```tsx
import {Separator, Surface} from "@heroui/react";
export function WithSurface() {
return (
Default Surface
Surface Content
Secondary Surface
Surface Content
Tertiary Surface
Surface Content
Transparent Surface
Surface Content
);
}
```
## Related Components
- **Card**: Content container with header, body, and footer
- **Chip**: Compact elements for tags and filters
- **Avatar**: Display user profile images
### Custom Render Function
```tsx
"use client";
import {Separator} from "@heroui/react";
export function CustomRenderFunction() {
return (
HeroUI v3 Components
Beautiful, fast and modern React UI library.
} />
Blog
}
/>
Docs
}
/>
Source
);
}
```
## Styling
### Passing Tailwind CSS classes
```tsx
import {Separator} from '@heroui/react';
function CustomSeparator() {
return (
);
}
```
### 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` | - | Overrides the default DOM element with a custom render function.|