Separator

Visually divide content sections

Import

import { Separator } from "heroui-solid";

Usage

HeroUI v3 Components

Beautiful, fast and modern React UI library.

Blog

Docs

Source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22import { Separator } from "heroui-solid"

export function Basic() {
  return (
    <div class="max-w-md">
      <div class="space-y-1">
        <h4 class="text-medium font-medium">HeroUI v3 Components</h4>
        <p class="text-small text-default-400">
          Beautiful, fast and modern React UI library.
        </p>
      </div>
      <Separator class="my-4" />
      <div class="text-small flex h-5 items-center space-x-4">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

Vertical

Blog

Docs

Source

1
2
3
4
5
6
7
8
9
10
11
12
13import { Separator } from "heroui-solid"

export function Vertical() {
  return (
    <div class="text-small flex h-5 items-center space-x-4">
      <div>Blog</div>
      <Separator orientation="vertical" />
      <div>Docs</div>
      <Separator orientation="vertical" />
      <div>Source</div>
    </div>
  )
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44import { Separator } from "heroui-solid"
import { For } from "solid-js"

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 (
    <div class="max-w-md space-y-4">
      <For each={items}>
        {(item, index) => (
          <div>
            <div class="flex items-center gap-3">
              <img alt={item.title} class="size-12" src={item.iconUrl} />
              <div class="flex-1 space-y-0">
                <h4 class="text-small font-medium">{item.title}</h4>
                <p class="text-sm text-muted">{item.subtitle}</p>
              </div>
            </div>
            {index() < items.length - 1 && <Separator class="my-4" />}
          </div>
        )}
      </For>
    </div>
  )
}

Variants

Default Variant

Secondary Variant

Tertiary Variant

1
2
3
4
5
6
7
8
9
10
11
12
13
14import { Separator } from "heroui-solid"

export function Variants() {
  return (
    <div class="flex max-w-md flex-col items-center gap-3">
      <div>Default Variant</div>
      <Separator variant="default" />
      <div>Secondary Variant</div>
      <Separator variant="secondary" />
      <div>Tertiary Variant</div>
      <Separator variant="tertiary" />
    </div>
  )
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59import { Separator, Surface } from "heroui-solid"

export function WithSurface() {
  return (
    <div class="flex flex-col gap-8">
      <div class="flex flex-col gap-2">
        <Surface
          class="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6"
          variant="default"
        >
          <h3 class="text-base font-semibold text-foreground">
            Default Surface
          </h3>
          <Separator />
          <p class="text-sm text-muted">Surface Content</p>
        </Surface>
      </div>

      <div class="flex flex-col gap-2">
        <Surface
          class="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6"
          variant="secondary"
        >
          <h3 class="text-base font-semibold text-foreground">
            Secondary Surface
          </h3>
          <Separator variant="secondary" />
          <p class="text-sm text-muted">Surface Content</p>
        </Surface>
      </div>

      <div class="flex flex-col gap-2">
        <Surface
          class="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6"
          variant="tertiary"
        >
          <h3 class="text-base font-semibold text-foreground">
            Tertiary Surface
          </h3>
          <Separator variant="tertiary" />
          <p class="text-sm text-muted">Surface Content</p>
        </Surface>
      </div>

      <div class="flex flex-col gap-2">
        <Surface
          class="flex min-w-[320px] flex-col gap-3 rounded-3xl border p-6"
          variant="transparent"
        >
          <h3 class="text-base font-semibold text-foreground">
            Transparent Surface
          </h3>
          <Separator />
          <p class="text-sm text-muted">Surface Content</p>
        </Surface>
      </div>
    </div>
  )
}

Manual Variant Override

Separator on default surface

Surface Content

The separator adapts to the surface background.

Separator on secondary surface

Surface Content

The separator adapts to the surface background.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43import { Separator, Surface } from "heroui-solid"

export function ManualVariantOverride() {
  return (
    <div class="flex flex-col gap-8">
      <div class="flex flex-col gap-2">
        <p class="text-sm font-medium text-muted">
          Separator on default surface
        </p>
        <Surface
          class="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6"
          variant="default"
        >
          <h3 class="text-base font-semibold text-foreground">
            Surface Content
          </h3>
          <Separator />
          <p class="text-sm text-muted">
            The separator adapts to the surface background.
          </p>
        </Surface>
      </div>

      <div class="flex flex-col gap-2">
        <p class="text-sm font-medium text-muted">
          Separator on secondary surface
        </p>
        <Surface
          class="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6"
          variant="secondary"
        >
          <h3 class="text-base font-semibold text-foreground">
            Surface Content
          </h3>
          <Separator />
          <p class="text-sm text-muted">
            The separator adapts to the surface background.
          </p>
        </Surface>
      </div>
    </div>
  )
}

Styling

Passing Tailwind CSS classes

import { Separator } from "heroui-solid";

function CustomSeparator() {
  return (
    <Separator class="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
`class`	`string`	-	Additional CSS classes

Differences from HeroUI React

The React render prop is replaced by Kobalte's as prop.
Orientation inheritance from a slotted parent (React Aria's SeparatorContext, e.g. inside Toolbar) is not ported — pass orientation explicitly.

Last updated: 7/19/26, 3:27 AM