Primitives

Divider

A separator, horizontal or vertical, optionally with a label in the middle.

data-scope="divider"

Usage

ReactVueSvelteAngular

import { Divider } from "@crosskit-ui/react";

<Divider label="or" />

<script setup lang="ts">
import { Divider } from "@crosskit-ui/vue";
</script>

<template>
  <Divider label="or" />
</template>

<script lang="ts">
  import { Divider } from "@crosskit-ui/svelte";
</script>

<Divider label="or" />

import { CkDivider } from "@crosskit-ui/angular";

@Component({
  imports: [CkDivider],
  template: `<ck-divider label="or" />`,
})
export class Demo {}

Props

Prop	Type	Default	Notes
`orientation`	"horizontal" \| "vertical"	`"horizontal"`	Axis.
`label`	ReactNode	—	Text centred in the rule.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.