The problem with asking an agent to build a component

Ask a coding agent for a combobox, date picker, menu, or sortable list and it can usually produce something that looks correct. The harder part is everything users do after the first render: keyboard navigation, focus restoration, dismissal, selection state, screen-reader announcements, and pointer interactions.

Those details are easy to get almost right and difficult to get consistently right.

Vercel's UI SDK takes a different approach. Instead of giving an agent only finished components, it gives it reusable behaviors from which it can compose components. The project was introduced on November 12, 2026. At 10:57 UTC on November 14, the GitHub API showed 4,147 stars and a push that morning. Its latest tagged packages were still beta releases, so the attention should not be confused with production maturity.

What UI SDK is, and what it is not

UI SDK is a TypeScript library of interface behaviors. Its core package contains building blocks for focus management, arrow-key navigation, selection, typeahead, popups, dismissal, focus recovery, drag-and-drop, and the ARIA attributes those interactions need. Framework adapters are available for React, Vue, Svelte, Solid, and Web Components.

This is not another styled component library. It does not replace your design system or hand you a complete visual language. The idea is to make interaction logic composable, so an agent can build a component that matches your product while reusing behavior instead of inventing keyboard and focus logic every time.

That makes it different from shadcn/ui, Radix UI, and Headless UI. Those projects provide component primitives or ready-to-compose components. UI SDK focuses further down the stack, on the behaviors that make those components work.

The architecture: behavior, primitive, adapter

There are three layers:

1. Behaviors implement focused interaction rules. A popup behavior handles opening, positioning, dismissal, and related focus transitions. A selection behavior manages chosen keys.
2. A primitive brings a component's state, methods, and slots together. It is the contract between interaction logic and rendered elements.
3. A framework adapter turns those slots into parts in React, Vue, Svelte, Solid, or Web Components.

The result separates what a control does from how it is rendered. A team can keep its own CSS and visual design while reusing interaction logic.

Image: the project's behavior model. Source: Vercel UI SDK repository.

Install it in a React project

The official quick start requires React 19 or newer for the React adapter. Install the core package and the adapter:

npm install @ui-sdk/react @ui-sdk/core

For another supported framework, use its adapter package instead of the React adapter. The project also ships an agent skill with instructions and local documentation for coding agents:

npx skills add vercel-labs/ui --skill ui-sdk

The skill is optional for a human writing code directly. It is useful when a coding agent is the intended consumer, because the agent needs the project's conventions and the correct documentation for the installed package version.

A small primitive

Here is the shape of a mute button primitive. Its state contains one boolean. The API changes that state, and the root slot exposes it to the rendered button.

import { definePrimitive } from "@ui-sdk/core";

const muteButton = definePrimitive({
  name: "mute-button",
  state: () => ({ muted: false }),
  api: (context) => ({
    toggle: () =>
      context.store.set({
        muted: !context.store.get().muted,
      }),
  }),
  slots: (slot) => ({
    root: slot({
      state: (state) => ({ muted: state.muted }),
      attrs: (state) => ({
        type: "button",
        "aria-pressed": String(state.muted),
      }),
      press: ({ api }) => api.toggle(),
    }),
  }),
});

This is a primitive definition, not yet a React component. The adapter turns the slot into a rendered part:

import { createParts } from "@ui-sdk/react/primitive";
import { muteButton } from "./mute-button";

const { Root: MuteButton } = createParts(muteButton, {
  root: "button",
});

You can render the part in your React tree and style it using existing design tokens. The official docs include a fuller copy-button example and an icon picker assembled from multiple behaviors.

What is new in the beta?

The project published v0.1.0-beta.2 packages on November 13. The release notes include fixes for nested modals that could make a newly opened dialog inert, and improvements to how field labels and control IDs appear in server-rendered HTML. The Vue adapter also received a Nuxt pre-bundling fix.

These are small changes, but they show why the beta label matters: accessibility and focus behavior have many edge cases, and the maintainers are still refining the API and adapters.

The official launch announcement explains the core idea:

// Detect dark theme var iframe = document.getElementById('tweet-2120950020249895314-47'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2120950020249895314&theme=dark" }

When should you use it?

UI SDK is worth evaluating when your product has custom controls, you want coding agents to compose UI without rewriting focus logic, or the same interaction needs to work across more than one UI framework.

It may be unnecessary if your application already uses a mature component system and your agents can reliably compose its existing components. It is also not a shortcut around accessibility testing. You still need to test real screen readers, browser differences, touch interactions, and your own component composition.

Trade-offs and alternatives

The largest risk is maturity. The packages were at v0.1.0-beta.2 when checked on November 14, and the docs warn that APIs may change. Pin versions in experiments and review the changelog before upgrading.

There is also a learning cost. Developers who only need a standard select or dialog may be faster with Radix, Headless UI, or an established design system. UI SDK becomes more compelling when an agent must create a component that is not already available, or when the same behavior needs to be reused in different visual contexts.

My practical recommendation: start with one difficult control, such as an accessible combobox or icon picker. Ask an agent to build it using UI SDK, then manually test tab order, arrow keys, Escape, focus restoration, disabled states, and screen-reader labels. Compare that result with your current primitives before adopting it across a codebase.

Image: UI SDK launch artwork. Source: Vercel UI SDK repository.

Sources and further reading:

• UI SDK repository
• Official quick start
• Core behavior documentation
• Primitive definition guide
• November 12 launch notes
• v0.1.0-beta.2 release history

What custom UI control would you trust an agent to build from behaviors instead of asking it to copy an existing component?

Written by Shaswat. Find more work on GitHub, LinkedIn, and StackShade on YouTube.