Preferences

Example

Installation

It lands in components/ui/preferences.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

Preferences

• nonce? (string): The nonce your Content Security Policy gives inline scripts. Example: Server Rendering.
• preferences (readonly PreferenceLike[]): The preferences to show, from createPreference or createColorScheme. Example: Usage.

usePreference

usePreference(preference) returns the preference's current state and updates the component when it changes. For a preference created with createPreference, the state is { value }. For a color scheme, it also includes system and resolved.

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.

[
  {
    "ref": "c8",
    "component": "segmented-control",
    "actions": [
      "setValue"
    ],
    "label": "Density",
    "value": "comfortable",
    "items": [
      {
        "value": "comfortable",
        "label": "Comfortable"
      },
      {
        "value": "compact",
        "label": "Compact"
      }
    ]
  }
]