Separator

Example

Installation

It lands in components/ui/separator.tsx, with UISet’s root (uiset). Wrap your app in <UISet> once, and every component takes its skin.

What UISet adds

The component is UI SDK’s own, with its parts, props and names, so everything below works as UI SDK documents it. UISet adds the look and checks it:

• Styles in five skins, each in light and dark, from CSS variables you can override.
• Text at 4.5:1 contrast and control edges and focus rings at 3:1, in every skin and theme, checked with axe in tests.
• Haptic cues on phones, and sound cues when you set sound on <UISet>.
• Examples that name every control, so agents can find it (see Agents below).

API Reference

Props are the same as below, as React props.

Separator

• orientation? (SeparatorOrientation): Which way the line runs. A vertical separator divides items in a row.
• decorative? (boolean): Hides the separator from assistive technology with role="none", for a line that's only visual. Leave it off when the separator divides content a screen reader should hear as separate, like groups of menu items.
• debug? (boolean): Logs every state change with its reason to the console, in development builds.

State

What render functions and state-based class names receive.

• orientation (SeparatorOrientation): Which way the line runs.

Accessibility

The component follows the WAI-ARIA separator role. A separator divides content a screen reader should hear as separate, and it's announced with role="separator" and its aria-orientation. A decorative separator is only visual: it gets role="none", so screen readers skip it. Use decorative only when the surrounding content already conveys the division. Either way, a separator never takes focus, so Tab moves past it.

Tested Behavior

Every line below is an automated test.

• A separator is announced with its orientation.
• A separator can't be focused.
• A separator carries its orientation for styling.

Runs in React, Vue and web components.

Agents

UI SDK’s agent bridge finds this component by its accessible name: give it a visible label or an aria-label, and an agent can read its state and call its actions without screenshots. Building with AI agents shows how to connect one.

This example has no controls of its own for an agent to use: it shows content, which an agent reads as page text.