Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/separator.

When to use it

Use Separator when the layout needs a quiet boundary between two related areas. It is a good fit for content sections, metadata rows, and toolbars where spacing alone is not quite enough.

If the split should carry stronger meaning, use a card surface, heading change, or section wrapper instead of stacking many separators.

Composition notes

Separator is not responsible for layout spacing. Add the surrounding gap with normal layout utilities, then drop the separator in as a lightweight visual cue.

For vertical usage, give it an explicit height so it reads clearly inside compact rows.

Behavior and theming guidance

Keep separators subtle. They should support hierarchy, not compete with the content they divide.

Use the shared separator tokens for color and rhythm when you need to tune the look. That keeps dividers consistent across docs, storefront blocks, and denser utility surfaces.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=Separator.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes