Get Started
Core ComponentsUpdated May 3, 2026

Separator

A quiet divider for visual structure.

#Default usage

Separator orientationsVertical separators stretch within inline rows.
Docs
Components
Theming
Quiet structure without visual noise.

#Usage

Code
import { Separator } from "@froggdesign/enter-ui";

export function Example() {
  return (
    <>
      <div className="docs-preview-row">
        <span>Docs</span><Separator orientation="vertical" /><span>Components</span><Separator orientation="vertical" /><span>Theming</span>
      </div>
      <Separator />
      <span className="docs-preview-muted">Quiet structure without visual noise.</span>
    </>
  );
}

#Accessibility

Separator renders a semantic separator role. Use decorative when the line is purely visual.

#API

  • orientation: horizontal or vertical.
  • decorative removes separator semantics.
  • Supports native hr props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page