Separator

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.

A separator is a horizontal or vertical line. It can be decorative or semantic depending on how it is used.

Use separators sparingly. Spacing and headings should do most of the grouping work. Add a separator when the visual boundary improves clarity.

If the separator communicates structure, keep it accessible. If it is only decorative, hide it from assistive technology.

npx honestui@latest add separator

import { Separator } from "@/components/ui/separator"

<Separator />