A line between things — with, when it helps, a word on it.
Import it from rei-kit:
import { BaseSeparator } from 'rei-kit'
Open BaseSeparator in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseSeparator } from 'rei-kit'
</script>
<template>
<p>Signed in already?</p>
<BaseSeparator label="or" />
<p>Create an account.</p>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | |
label | string | '' | A word in the middle of the line: "or", "Today". Already translated. |
spacing | 'none' | 'sm' | 'md' | 'md' | Room around it. `none` for a divider inside a list that has its own. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.