GitHub

Separator

Visual divider line

Basic Usage

Loading...

Installation

pnpm add @corew500/ui

Usage

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

<Separator>Content</Separator>

API Reference

Props

PropTypeDefaultDescription
orientationenumhorizontalThe orientation of the separator.
styleenumStyle applied to the element, or a function that returns a style object based on the component’s state.
classNameenumCSS class applied to the element, or a function that returns a class based on the component’s state.
renderenumAllows 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.

Accessibility

Screen Readers

  • - Uses semantic `role="separator"` for screen readers
  • `aria-orientation` automatically set to "horizontal" or "vertical"
  • Decorative separators are announced by screen readers as visual boundaries
  • For purely visual separators, consider adding `aria-hidden="true"`

Localization

Translatable Content

  • - No text content to localize

RTL Support

  • Works correctly in both LTR and RTL layouts

Related

  • Base UI Separator documentation for additional props