Skip to main content

Separator

Divide content regions with an oriented semantic line.

View as MarkdownSource Code

Use Separator to divide related regions with a visible line. Choose its orientation to match the layout boundary.

Basic usage#

import { Separator } from 'moraine'

export function Example() {
  return <Separator />
}

Playground#

Section Header
Content Section
Props
Slots

Anatomy#

Separator [component; slot=root; <div role="separator">]

Usage#

Root styling#

Separator has one <div> root. Use direct class and style props for a local override, or configure separator.base.root in your Theme for application defaults. It does not accept instance classes or styles maps.

import { Separator, MoraineProvider } from 'moraine'
import { defineTheme } from 'moraine/theme'

const theme = defineTheme({
  separator: { base: { root: 'bg-emerald-500' } },
})

export function RootStyling() {
  return (
    <div class="w-full space-y-6">
      <div class="space-y-2">
        <p class="text-sm text-muted-foreground">Instance class and style</p>
        <Separator class="bg-blue-500" style={{ height: '3px' }} />
      </div>
      <MoraineProvider theme={theme}>
        <div class="space-y-2">
          <p class="text-sm text-muted-foreground">Local Theme defaults</p>
          <Separator />
        </div>
      </MoraineProvider>
    </div>
  )
}

Semantic orientation#

Every Separator exposes role="separator", aria-orientation, and data-orientation. Choose horizontal or vertical orientation to match the surrounding layout.

import { Separator } from 'moraine'

export function SeparatorUsage() {
  return (
    <div class="max-w-md w-full space-y-4">
      <div>
        <h4 class="text-sm font-medium">Moraine UI</h4>
        <p class="text-xs text-muted-foreground">Accessible SolidJS component system.</p>
      </div>
      <Separator />
      <div class="text-xs flex gap-4 h-5 items-center">
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Source</span>
        <Separator orientation="vertical" />
        <span>Releases</span>
      </div>
    </div>
  )
}

Attributes#

Attributes
data-orientationSlot: separatorDescription: Stores the rendered orientation (horizontal or vertical).

Props#

Props for the Separator component. Renders a <div> element by default.

Prop