Separator

Dividers. Free, MIT · Basics › Labels and tooltips

Installation

npx valyro-cli@latest add separator

npx shadcn@latest add https://valyro.xyz/r/separator.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Separator } from 'valyro-ui';

Prop	Type	Default
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal rule across the container, or a vertical line stretched to the row height.
`label`	`ReactNode`		Text in the middle, e.g. "OR". Horizontal only.
`decorative`	`boolean`	`true`	Purely visual (default) — hidden from assistive tech.

Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Avatar — User avatars
Tooltip — Hover and focus hints
Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit

Previous: Tooltip · Next: Icon · All Basics