Separator
Visually divide content sections
Import
import { Separator } from '@heroui/react';Usage
HeroUI v3 Components
Beautiful, fast and modern React UI library.
import {Separator} from "@heroui/react";
export function Basic() {
return (
<div className="max-w-md">Vertical
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",Surface Variants
The Separator component adapts to different surface backgrounds for better visibility.
Default Surface
Surface Content
Separator automatically detects default surface level.
Secondary Surface
Surface Content
Separator automatically detects secondary surface level.
Tertiary Surface
Surface Content
Separator automatically detects tertiary surface level.
Transparent Surface
Surface Content
Separator automatically detects transparent surface level.
import {Separator, Surface} from "@heroui/react";
export function SurfaceVariants() {
return (
<div className="flex flex-col gap-8">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)
API Reference
Separator Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator |
className | string | - | Additional CSS classes |
