revido kit
Start building
← All components
layout / beta

Separator

A 1px legible rule between groups of content, horizontal or vertical.

LIVE PREVIEW
Loading preview…

When to use

  • Between sections inside a card, panel or menu.
  • Between toolbar groups (vertical).

Consider an alternative

  • Page-level structure — use spacing and surfaces.
  • Around every list row — rows have their own dividers.

Import

import { Separator } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

classNamestring'react-aria-Separator'The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
elementTypestring—The HTML element type that will be used to render the separator.
orientationOrientation'horizontal'The orientation of the separator.
renderDOMRenderFunction<"div" | "hr", undefined>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Examples

Horizontal

<Separator />

Vertical in a toolbar

<Separator orientation="vertical" />

Related components