Project details
Landing page redesign for Northwind Trading.
Usage
import { Separator } from "@voila.dev/ui/separator";<Separator />
<Separator orientation="vertical" />
<Separator>OR</Separator>A rule between things that belong to the same group — menu items, toolbar clusters, the two halves of a sign-in form. Reach for it when the space alone is not doing the work. When the two blocks have their own titles, the heading is already the boundary and a rule on top of it is noise; that is Section's job, not a separator's.
Separators inside a menu or a sidebar come with those components
(DropdownMenu.Separator,
Sidebar.Separator) and are already spaced for their surface — use
those rather than dropping a bare Separator in.
Recipes
The default preview above carries all three shapes; the notes worth having are about the ones that surprise people.
A vertical separator stretches to its container, which means it is invisible
when the container has no height of its own. In a flex row, h-5 on the
separator — or items-stretch on the row — is what makes it appear. Inside a
taller row, give it a height and my-auto to re-centre it.
Children turn it into a labelled divider, the "OR" between a form and its
social-login buttons. The rule is drawn on both sides of the label
automatically; do not render two separators around a <span>.
Base UI marks it role="separator", so it is announced. When it is purely
decorative — a hairline between two cards that are already distinct — pass
aria-hidden and let the layout carry the meaning.
API
| Prop | Type | Default | |
|---|---|---|---|
className | string | ((state: SeparatorState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
orientation | Orientation | "horizontal" | The orientation of the separator. |
render | ComponentRenderFn<HTMLProps, SeparatorState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: separator/components/separator.tsx.
orientation and the state-function forms of className and style come from
Base UI's Separator.