SeparatorUpdated
Visually divide content sections
Import
import { Separator } from '@heroui/react';Usage
HeroUI v3 Components
Beautiful, fast and modern React UI library.
Blog
Docs
Source
import {Separator} from "@heroui/react";
export function Basic() {
return (
<div className="max-w-md">Vertical
Blog
Docs
Source
import {Separator} from "@heroui/react";
export function Vertical() {
return (
<div className="text-small flex h-5 items-center space-x-4">With Content
Set Up Notifications
Receive account activity updates
Set up Browser Extension
Connect your browser to your account
Mint Collectible
Create your first collectible
import {Separator} from "@heroui/react";
const items = [
{
iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/bell-small.png",Variants
Default Variant
Secondary Variant
Tertiary Variant
import {Separator} from "@heroui/react";
export function Variants() {
return (
<div className="flex max-w-md flex-col items-center gap-3">With Surface
The Separator component adapts to different surface backgrounds for better visibility.
Default Surface
Surface Content
Secondary Surface
Surface Content
Tertiary Surface
Surface Content
Transparent Surface
Surface Content
import {Separator, Surface} from "@heroui/react";
export function WithSurface() {
return (
<div className="flex flex-col gap-8">Custom Render Function
HeroUI v3 Components
Beautiful, fast and modern React UI library.
Blog
Docs
Source
"use client";
import {Separator} from "@heroui/react";
export function CustomRenderFunction() {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. |
