Separator
A separator element accessible to screen readers.
loveui
Unstyled, accessible primitives for fast product UI and design systems.
Blog
Docs
Source
Releases
Overview
Use Separator to divide related content or controls.
Separators are useful in menus, toolbars, cards, settings pages, and layouts where a visual break makes scanning easier.
Anatomy
A separator is a horizontal or vertical line. It can be decorative or semantic depending on how it is used.
Usage guidance
Use separators sparingly. Spacing and headings should do most of the grouping work. Add a separator when the visual boundary improves clarity.
Accessibility
If the separator communicates structure, keep it accessible. If it is only decorative, hide it from assistive technology.
Installation
npm
npx love-ui@latest add separatorUsage
import { Separator } from "@/components/ui/separator"<Separator />