Separator

Solidtype_heroui.Separator is Kobalte’s Separator.Root, with the classes HeroUI’s own separatorVariants gives and the explicit role React Aria writes.

Usage

HeroUI v3 Components

Beautiful, fast and modern React UI library.

---

Blog

Docs

Source

separator_usage.mlx

module Separator = Solidtype_heroui.Separator

let make () =
  <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>

Examples

Variants

Default Variant

---

Secondary Variant

---

Tertiary Variant

---

separator_variants.mlx

module Separator = Solidtype_heroui.Separator

let make () =
  <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

Default Surface

---

Surface Content

Secondary Surface

---

Surface Content

Tertiary Surface

---

Surface Content

Transparent Surface

---

Surface Content

separator_surface.mlx

module Separator = Solidtype_heroui.Separator
module Surface = Solidtype_heroui.Surface

let surface ~title ~variant ~separator ?(border = "") () =
  <Surface
    class_=(fun () ->
             "flex min-w-[320px] flex-col gap-3 rounded-3xl " ^ border ^ "p-6")
    variant=(fun () -> variant)>
    <h3 class_="text-base font-semibold text-foreground">
      (fun () -> Solidtype.Jsx.string title)
    </h3>
    <Separator variant=(fun () -> separator) />
    <p class_="text-sm text-muted">"Surface Content"</p>
  </Surface>

let make () =
  <div class_="flex flex-col gap-8">
    <div class_="flex flex-col gap-2">
      (fun () ->
        Solidtype.Jsx.element
          (surface ~title:"Default Surface" ~variant:`default
             ~separator:`default ()))
    </div>
    <div class_="flex flex-col gap-2">
      (fun () ->
        Solidtype.Jsx.element
          (surface ~title:"Secondary Surface" ~variant:`secondary
             ~separator:`secondary ()))
    </div>
    <div class_="flex flex-col gap-2">
      (fun () ->
        Solidtype.Jsx.element
          (surface ~title:"Tertiary Surface" ~variant:`tertiary
             ~separator:`tertiary ()))
    </div>
    <div class_="flex flex-col gap-2">
      (fun () ->
        Solidtype.Jsx.element
          (surface ~title:"Transparent Surface" ~variant:`transparent
             ~separator:`default ~border:"border " ()))
    </div>
  </div>

Vertical

Blog

Docs

Source

separator_vertical.mlx

module Separator = Solidtype_heroui.Separator

let make () =
  <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

separator_content.mlx

module Separator = Solidtype_heroui.Separator

let assets =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/"

let items =
  [|
    ( assets ^ "bell-small.png",
      "Receive account activity updates",
      "Set Up Notifications" );
    ( assets ^ "compass-small.png",
      "Connect your browser to your account",
      "Set up Browser Extension" );
    ( assets ^ "mint-collective-small.png",
      "Create your first collectible",
      "Mint Collectible" );
  |]

let make () =
  <div class_="max-w-md space-y-4">
    <Solidtype.For each=(fun () -> items)>
      (fun (icon, subtitle, title) index ->
        <div>
          <div class_="flex items-center gap-3">
            <img alt=(fun () -> title) class_="size-12" src=(fun () -> icon) />
            <div class_="flex-1 space-y-0">
              <h4 class_="text-small font-medium">
                (fun () -> Solidtype.Jsx.string title)
              </h4>
              <p class_="text-sm text-muted">
                (fun () -> Solidtype.Jsx.string subtitle)
              </p>
            </div>
          </div>
          (fun () ->
            if (index () [@u]) < Array.length items - 1 then
              Solidtype.Jsx.element <Separator class_="my-4" />
            else Solidtype.Jsx.string "")
        </div>)
    </Solidtype.For>
  </div>

Render Function

HeroUI’s Render Function example gives the separator render, React’s way to swap the element it renders, which a Solid component has no need of.

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

Account settings

---

Profile

Billing

Security

separator_tailwind.mlx

module Separator = Solidtype_heroui.Separator

let make () =
  <div class_="max-w-xs space-y-4">
    <p class_="text-sm font-medium text-foreground">"Account settings"</p>
    <Separator class_="bg-separator-secondary" />
    <div class_="flex items-center gap-3 text-sm text-muted">
      <span>"Profile"</span>
      <Separator class_="h-4 bg-separator" orientation=`vertical />
      <span>"Billing"</span>
      <Separator class_="h-4 bg-separator" orientation=`vertical />
      <span>"Security"</span>
    </div>
  </div>

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every one, as with HeroUI in React:

@layer components {
  .separator {
    @apply bg-accent;
  }
}

Styling Reference

CSS Classes

• .separator, .separator--horizontal, .separator--vertical
• Variants: .separator--default, .separator--secondary, .separator--tertiary

A separator is an <hr> where it is horizontal and a <div> where it is vertical, as React Aria’s is, and a <div> inside a dropdown’s menu, as React Aria’s menu asks; each has the role separator, its aria-orientation, and data-slot="separator", which a menu’s styles read.

API Reference

Each prop beside the name HeroUI’s React component gives it.

Separator

React	solidtype	Type	Default	Description
orientation	orientation	[ `horizontal | `vertical ]	`horizontal	Its direction
variant	variant	[ `default | `secondary | `tertiary ]	`default	Its contrast
className	class_	string		Added after HeroUI’s classes

Beside React

Original HeroUI documentation: Separator.

The same HeroUI Separator twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two separators: a marked row is one they disagree on, and a dimmed row is a framework’s own, which no style reads.

solidtype — OCaml, on Solid and Kobalte

---

React — TypeScript, on React Aria

attribute	solidtype	React