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

Surface Variants

The Separator component automatically detects the surface level and applies the appropriate variant for better visibility.

import {Separator, Surface} from "@heroui/react";

export function SurfaceVariants() {
  return (
    <div className="flex flex-col gap-8">

Manual Variant Override

You can manually override the variant to achieve different visual effects.

import {Separator, Surface} from "@heroui/react";

export function ManualVariantOverride() {
  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)
• .separator--in-surface-default - Applied when inSurface="default", uses bg-separator for better visibility on default surface backgrounds
• .separator--in-surface-secondary - Applied when inSurface="secondary", uses bg-separator-secondary for better visibility on secondary surface backgrounds
• .separator--in-surface-tertiary - Applied when inSurface="tertiary", uses bg-separator-tertiary for better visibility on tertiary 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:

<Surface variant="default">
  <Separator />
</Surface>

<Surface variant="secondary">
  <Separator />
</Surface>

<Surface variant="tertiary">
  <Separator />
</Surface>

When inSurface is not explicitly set, the Separator will automatically detect the SurfaceContext variant and apply the appropriate separator color for that surface level. If no SurfaceContext is present, it uses the base separator style (suitable for background or transparent cards). You can also manually override the surface level:

<Surface variant="default">
  <Separator inSurface="secondary" />
</Surface>

Note: The inSurface prop uses semantic naming that avoids the "on*" pattern (commonly used for React event handlers like onClick, onChange). The prop name indicates that the separator is used "in" a surface context, while the value indicates the level (default, secondary, etc.).