Introducing UI SDK

Today we're releasing UI SDK.

UI SDK is a TypeScript library of UI behaviors, the layers that make up a component library. It provides building blocks for keyboard navigation, focus, selection, popups, drag and drop, and the ARIA attributes those interactions need.

For example, createRovingFocus moves focus with the arrow keys, createTypeahead finds an option as you type, and createPopup opens a popup next to its button.

We built more than 50 of them. You, or your agent, combine them to build your own components.

Build a component

Here's a small popover. You define it once with @ui-sdk/core, and createPopup does the hard part: it opens next to its button, closes on Escape or a click outside, and puts focus back where it was.

import {
  createPopup,
  definePrimitive,
  popupContent,
  popupState,
  popupTrigger,
} from "@ui-sdk/core"
import { popoverPreset } from "@ui-sdk/core/popover"

const share = definePrimitive({
  name: "share",
  options: { defaultOpen: "boolean" },
  state: (options: { defaultOpen?: boolean }) => popupState(options),
  api: (context) => createPopup(context, { preset: popoverPreset }),
  slots: (slot) => ({
    trigger: popupTrigger(slot),
    content: popupContent(slot),
  }),
})

export { share }

Then make it a component in your framework:

"use client"

import { createParts } from "@ui-sdk/react/primitive"
import { share } from "@/lib/share"

const parts = createParts(share, { trigger: "button", content: "div" })

const Share = parts.Root
const ShareTrigger = parts.Trigger
const ShareContent = parts.Content

export { Share, ShareContent, ShareTrigger }

Then use it like any other component:

import { Share, ShareContent, ShareTrigger } from "@/components/ui/share"

function Example() {
  return (
    <Share>
      <ShareTrigger>Share</ShareTrigger>
      <ShareContent>Anyone with the link can view.</ShareContent>
    </Share>
  )
}

To build one step by step, read Build a Component. To combine several behaviors, read Compose Behaviors.

Component libraries

We used the same behaviors to build a component library for every framework: more than 50 ready-made components, from a Select to a Date Picker, with the same parts in React, Vue, Svelte, Solid and Web Components. You bring the styles.

import {
  Select,
  SelectContent,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@ui-sdk/react/select"

function Example() {
  return (
    <Select placeholder="Select a role">
      <SelectLabel>Role</SelectLabel>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="viewer">Viewer</SelectItem>
        <SelectItem value="editor">Editor</SelectItem>
      </SelectContent>
    </Select>
  )
}

Agents

These days, agents build our interfaces. And more and more, agents use them too. So we built UI SDK for both.

Everything you build with UI SDK is easy for an agent to use. An agent can read what's on the page and press, type and pick, just like a person would, within the permissions you set.

Give an agent your page with createAgent:

import { createAgent } from "@ui-sdk/react/agent"

const agent = createAgent({
  allow: ({ component, label, action }) =>
    component === "select" && label === "Region" && action === "setValue",
})

agent.snapshot()

await agent.act({
  steps: [{ ref: "Region", action: "setValue", args: ["north-america"] }],
})

WebMCP lets a page give tools to the agent built into a browser. Call registerTools and the browser's agent can read your components and call their actions too. To set it up, read WebMCP.

Get started

Copy the setup prompt into your agent, and it sets up UI SDK for you.

Want to learn more? Read the introduction.

UI SDK is currently in beta. Try it, and tell us what you think on GitHub.

Thank you

UI SDK is everything we learned from years of using and building component libraries. Thank you to the teams behind Radix, Base UI, React Aria, shadcn/ui, Nuxt UI and Geist, and to the WAI-ARIA Authoring Practices.