Foundations · stable · MIT

Separator

A quiet horizontal or vertical divider with decorative or semantic mode.

Install editable source

Add Separator

Base UI / canonicalnpx shadcn@latest add https://gummyui.dev/r/gummy-separator.json

No package dependency beyond React. Shared Gummy material is resolved automatically.

Behavior contract

Semantics before surface

Semantics

A div with optional separator role and orientation.

Keyboard

No component-specific keys.

System support

Light and dark themes, logical RTL layout, reduced motion, responsive content, and forwarded public refs.

Source-derived reference

Anatomy and public API

Exported anatomy

These public React parts are read directly from the canonical source during the documentation build.

GummySeparator

Prop contracts

`GummySeparatorProps`

Composes React.HTMLAttributes<HTMLDivElement> & { orientation?: "horizontal" | "vertical"; decorative?: boolean; tone?: "quiet" | "fruit"; }

Troubleshooting

Check behavior before surface.

If the material is missing, confirm the registry-installed shared and component CSS files are imported once.
If interaction differs, preserve this contract: No component-specific keys.
If assistive output differs, preserve this semantic foundation: A div with optional separator role and orientation.
If dark, RTL, or reduced-motion behavior is missing, verify the nearest theme, direction, and media-query boundaries rather than adding page-local overrides.

Implementation decisions

When to use Separator

Use a separator only when it clarifies the relationship between neighbouring regions or items. A purely decorative line should stay out of the accessibility tree; a semantic separator should match the actual horizontal or vertical structure. Do not use repeated rules instead of headings or spacing. Test the boundary in stacked mobile layouts, forced colours, high zoom, print, and RTL to confirm it still communicates the intended grouping.

Live product source

Inspect the canonical states

The Component Lab exercises real source across default, focus, disabled, responsive, dark, reduced-motion, and RTL contexts.

Open the live Component Lab

Interactive inspection

Try Separator in context

Load the real component preview when you are ready to interact with its responsive, theme, and direction controls.

Editable source

Read before you install

Canonical Base UI or native source

The registry payload stays off the initial page request.