Separator

Import

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

Usage

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",

Expand code

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)
• .separator--on-surface - Applied when isOnSurface is true, uses bg-separator-on-surface for better visibility on surface backgrounds

API Reference

Separator Props

Automatic Surface Detection

The Separator component automatically detects when it's placed inside a surface component (one that uses bg-surface) and applies the appropriate divider color. This works with components that provide SurfaceContext, such as:

• Card
• Alert
• Popover
• Modal
• Combobox
• Select
• Dropdown

Example:

<div className="bg-surface">
  <Separator isOnSurface />
</div>

When isOnSurface is not explicitly set, the Separator will automatically detect the SurfaceContext and apply the correct styling.