Components
Separator
A separator component supporting horizontal and vertical orientations, with text label and composable assembly
Installation
- $npx litefy@latest add separator
- $pnpm dlx litefy@latest add separator
- $yarn dlx litefy@latest add separator
- $bun --bun litefy@latest add separator
Usage
A line, or a line–text–line divider when children is passed; horizontal carries a default my-3, vertical self-stretches in flex rows and relies on gap.
Litefy UIAn open-source UI component library.
"use client";import { Separator } from "@/ui";export default function Demo() { return ( <div className="w-full max-w-sm rounded-lg border p-6"> <div className="flex flex-col items-center gap-1 text-center"> <span className="text-base font-semibold">Litefy UI</span> <span className="text-sm text-muted-foreground">An open-source UI component library.</span> </div> <Separator /> <nav className="flex items-center justify-center gap-6 text-sm text-muted-foreground"> <a href="#" className="transition-colors hover:text-foreground"> Blog </a> <Separator orientation="vertical" /> <a href="#" className="transition-colors hover:text-foreground"> Docs </a> <Separator orientation="vertical" /> <a href="#" className="transition-colors hover:text-foreground"> Source </a> </nav> </div> );}API Reference
High-level Components
Ready-to-use composite component.
Separator
Renders a single line, or a line–text–line divider when children is passed.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Text label rendered between two lines |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientation of the separator |
className | ClassNameValue | - | Custom class names, applied to the line or the wrapper |
classNames | { line?, text?: ClassNameValue } | - | Custom classes for the lines and the text label |
styles | { line?, text?: React.CSSProperties } | - | Inline styles for the lines and the text label |
Composable Components
SeparatorLine
The line part carrying its own data-orientation sizing. Vertical lines stretch to the flex row (self-stretch), or pin them with a fixed h-*.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientation of the line |
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"div"> | - | Supports all native div props, such as role |
SeparatorText
The text label part, styled for sitting between two lines.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"span"> | - | Supports all native span props, such as children |