Divider

In review

Live · web

Between rows: full-bleed vs inset (toggle)

ThemeSystem

Default modelLarge 2.0

Workspacedizyx

NotificationsOn

Inset the middle rule by --space-4

Labeled: centered & status

Continue with your workspace credentials.

Use a one-time email link instead.

Session reset

Section header: flush-left label + rule

Session overrides

Tool modeAsk

ThinkingAuto

Sampling

Temperature0.7

Vertical: between inline items

Streaming

2 tools

12m ago

Edit

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
import { NockerlDivider } from '@dizyx/nockerl-react';

export function SettingsGroup() {
  return (
    <Card>
      <Row label="Theme" value="System" />
      <NockerlDivider />                                {/* full-bleed hairline */}
      <Row label="Default model" value="Large 2.0" />
      <NockerlDivider inset="var(--space-4)" />          {/* inset to clear the text column */}
      <Row label="Workspace" value="dizyx" />

      <NockerlDivider label="OR" />                      {/* centered label, balanced rules */}
      <NockerlDivider label="Session overrides" sectionLabel />  {/* flush-left header */}

      <Inline>
        Streaming <NockerlDivider orientation="vertical" /> 2 tools
      </Inline>

      <NockerlDivider tone="accent" />                   {/* the 1.5px cyan boundary line */}
    </Card>
  );
}

// Android: Jetpack Compose (canonical). Material 3 HorizontalDivider / VerticalDivider,
// colored from the NockerlColors tokens (com.nockerl.app.core.theme).
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.VerticalDivider
import com.nockerl.app.core.theme.LocalNockerlColors

val colors = LocalNockerlColors.current

// Full-bleed standard rule (MainScaffold).
HorizontalDivider(thickness = 1.dp, color = colors.divider)

// Inset rule: indent to clear the row's text column (FlicTargetPickerSheet).
HorizontalDivider(modifier = Modifier.padding(horizontal = 20.dp), color = colors.altHairline)

// Vertical rule between inline items.
VerticalDivider(thickness = 1.dp, color = colors.divider, modifier = Modifier.height(22.dp))

// The signature cyan boundary line, full-width 1.5dp accentPrimary (TopChromeBoundary).
Box(Modifier.fillMaxWidth().height(1.5.dp).background(colors.accentPrimary))

// Labeled divider: two weighted rules around a centered label (SystemMessageDivider).
Row(verticalAlignment = Alignment.CenterVertically) {
    Box(Modifier.weight(1f).height(1.dp).background(colors.statusWarning.copy(alpha = 0.3f)))
    Text("Session reset", style = MaterialTheme.typography.labelSmall, color = colors.statusWarning,
        modifier = Modifier.padding(horizontal = 12.dp))
    Box(Modifier.weight(1f).height(1.dp).background(colors.statusWarning.copy(alpha = 0.3f)))
}

// macOS: SwiftUI (canonical). NockerlVoice/UI uses a hairline Rectangle filled with
// the NockerlTheme.hairline / .divider / .accent tokens (NockerlTheme.swift).

// Horizontal rule, full-bleed (SettingsView / HistoryView).
Rectangle().fill(NockerlTheme.hairline).frame(height: 1)

// Inset rule: pad the rule, not the rows.
Rectangle().fill(NockerlTheme.hairline).frame(height: 1).padding(.horizontal, 20)

// Vertical rule between inline items (RecordingHUD pill / DashboardView sidebar).
Rectangle().fill(NockerlTheme.divider).frame(width: 1, height: 22)

// The signature cyan boundary line, the brand-carrying rule.
Rectangle().fill(NockerlTheme.accent).frame(height: 1.5)

// System-supplied separator for menus / lists (MenuBarContent, OnboardingView).
Divider()

Parameters

Prop	Type	Default	Description
`orientation`	`NockerlDividerOrientation`	`'horizontal'`	Lay the rule horizontally (default) or vertically between inline items.
`tone`	`NockerlDividerTone`	`'default'`	Hairline tone: standard, alt-plane, the cyan signature line, a status rule, or the rare warm (accent.warm) feature line.
`inset`	`string`		Symmetric inset (indent) from the container edges, in token spacing steps.
`label`	`string`		Optional centered label ("OR") with balanced rules on each side.
`sectionLabel`	`boolean`	`false`	Render the label flush-left as a section header (one trailing rule).

Also accepts the native <hr> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.

Compose ships Material 3’s HorizontalDivider / VerticalDivider; Nockerl supplies the color token (colors.divider / altHairline) and, for the signature line + labeled variants, a thin Box / Row. There is no single wrapper component yet.

Parameter	Type	Default	Description
`modifier`	`Modifier`	`Modifier`	External modifier. Use `Modifier.padding(horizontal = …)` for an inset rule.
`thickness`	`Dp`	`DividerDefaults.Thickness (1.dp)`	Hairline weight. The signature cyan boundary line uses 1.5.dp.
`color`	`Color`	`DividerDefaults.color`	Pass a Nockerl token: `colors.divider`, `colors.altHairline`, or `colors.accentPrimary` for the signature line.

SwiftUI has no parameterized divider component; Nockerl draws a Rectangle filled with a theme token and sized to the hairline. The native Divider() is used only inside menus and Form-style lists where the system separator is expected.

Style	Type	Description
`Rectangle().fill(NockerlTheme.hairline)`	`View`	Standard hairline (white @ 8% on dark). Size with `.frame(height: 1)` or `.frame(width: 1)`.
`Rectangle().fill(NockerlTheme.divider)`	`View`	Slightly stronger rule (white @ 12% on dark), used for vertical separators between inline items.
`Rectangle().fill(NockerlTheme.accent)`	`View`	The cyan signature boundary line. Size with `.frame(height: 1.5)`.
`Divider()`	`View`	System separator: menus (`MenuBarContent`) and onboarding lists only.

Cross-platform drift (tracked for reconciliation)

The hairline tone and the signature cyan line agree; the wrapping does not:

No shared component. Web exposes one Divider (orientation + tone + label); Compose uses Material’s HorizontalDivider/VerticalDivider + a hand-rolled Box for the signature line and labeled variants; Swift draws a Rectangle. The labeled/section and accent variants should land as one wrapper per platform.
Token naming. The standard rule is divider; the alt-plane rule is altHairline (Compose) / hairline (Swift). Both apps also reach for outlineVariant (Material) at ~50% alpha in places. That should resolve to the divider token.
Signature line weight is a literal. Both apps hardcode the cyan boundary at 1.5dp/1.5pt; it should become a token (divider.signature) alongside the standard 1.