Divider

Pick a framework. Both use the same recipe, so the styling matches exactly.

Above the line

Left

Right

Divider props for React
Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	horizontal	Line direction.

Also takes className and children. Anything else passes through to the div.

divider.demo.tsx

import { Divider } from "../react/index.js";

export default function DividerDemo() {
  return (
    <div className="flex flex-col gap-4">
      <p className="text-ink-secondary">Above the line</p>
      <Divider />
      <div className="flex h-10 items-stretch gap-4">
        <span className="self-center text-ink-secondary">Left</span>
        <Divider orientation="vertical" />
        <span className="self-center text-ink-secondary">Right</span>
      </div>
    </div>
  );
}

Above the line

Left

Right

Divider props for Svelte
Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	horizontal	Line direction.

Also takes class and snippet children. Anything else passes through to the div.

divider.demo.svelte

<script lang="ts">
  import { Divider } from "../svelte/index.js";
</script>

<div class="flex flex-col gap-4">
  <p class="text-ink-secondary">Above the line</p>
  <Divider />
  <div class="flex h-10 items-stretch gap-4">
    <span class="self-center text-ink-secondary">Left</span>
    <Divider orientation="vertical" />
    <span class="self-center text-ink-secondary">Right</span>
  </div>
</div>