UISet is an open-source set of components, kits, page templates and themes for Vercel’s UI SDK, installed with the shadcn CLI. UI SDK provides the behavior (keyboard, focus, ARIA, agent access) and unstyled components; UISet provides how they look, the larger components apps need, and whole pages.

How is it different from shadcn/ui?

shadcn/ui styles Radix UI. UISet styles UI SDK, so it inherits UI SDK’s behaviors and its agent bridge, and it adds kits shadcn/ui doesn’t have: a data grid, chat, a rich text editor, a scheduler, a board, a node canvas, an IDE and a terminal. It installs with the same CLI and picks up your shadcn theme.

Do I have to use React?

No. Every kit and template also ships as Web Components, which work in Vue, Svelte, Solid, Angular and plain HTML. The React and web versions share the same styles and behavior.

Can AI agents use what I build with it?

Yes. Every control is named for UI SDK’s agent bridge, so an agent reads the page and works the controls directly instead of reading screenshots. Risky actions can wait for a person’s approval in the Agent Console. The Agents page has our benchmark.

Can my coding agent build with it?

Yes. Install the UISet skill (npx skills add superzero11/uiset) and your agent learns the items, the skins and the rules, or point it at llms.txt. Every docs page is Markdown.

Is it free, and who owns the code?

It’s free and MIT licensed. The shadcn CLI copies each item’s source into your project, so the code is yours to change.

Is it ready for production?

UI SDK is in public beta, and UISet pins its exact version. Every item is tested for accessibility in every skin and theme, for keyboard use, and for a clean install into a new app. Expect API changes until UI SDK reaches 1.0.

Is UISet made by Vercel?

No. UISet is a community project built on UI SDK. It isn’t affiliated with Vercel.

UISet: components, kits, templates and themes for UI SDK

UI SDK gives you behavior. UISet gives you everything else.

UI SDK moved the hard part of UI into reusable behaviors: arrow keys, focus, selection, popups, drag and drop, and the ARIA that goes with them, plus a bridge that lets agents work the controls. It ships its components unstyled, and it leaves the large ones to you. That’s where UISet starts.

UISet

Looks: five skins, a theme generator, sound and haptics
55 styled components: and 16 app parts
12 kits: chat, rich text, data grid, charts, scheduler and more
10 page templates: to start from
Web Components: for Vue, Svelte, Solid and HTML
A skill and llms.txt: for coding agents

UI SDK

Behaviors: keyboard, focus, selection, popups, drag and drop
55 components: unstyled
Agent bridge: and WebMCP
Five frameworks: React, Vue, Svelte, Solid, Web Components

Everything a product needs, in one set

Pick what you need; each item installs on its own and brings only what it uses. You never mix in a second UI library.

Kits you’d otherwise build yourself

These are the real components, running. Each is keyboard-first, readable by screen readers and agents, and styled by the skin around it.

You23:58

Search fires a request on every keystroke. How do I debounce it in React?

AI

Assistant

Debounce the value, not the handler, and cancel stale requests:

tsx

function useDebounced<T>(value: T, ms = 250) {
  const [debounced, setDebounced] = useState(value)
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), ms)
    return () => clearTimeout(id)
  }, [value, ms])
  return debounced
}

Then fetch from the debounced query with an AbortController, so a slow old response can't overwrite a newer one.

Approach	Requests while typing "react"
No debounce	5
Debounced 250 ms	1

Sources: 1 2

2 of 2

AI

Assistant

Here's how I'd roll it out:

Add useDebounced to hooks/Done
Abort stale requests in useSearchIn progress
Test fast typing on a slow networkTo doChrome DevTools, Slow 4G

Simulated assistant. Every part is a real component: markdown, code, reasoning, tool calls, sources, tasks, versions, attachments, commands and mentions.

pnpm dlx shadcn@latest add superzero11/uiset/chat superzero11/uiset/chat-composer

Chat docs

All 12 kits, including the board, canvas, IDE, mobile patterns, terminal and the Studio synth.

Agents can use it, not just look at it

Every control is named for UI SDK’s agent bridge, so an agent reads the page as data and works the controls directly, with no screenshots. Risky steps wait for a person in the Agent Console, and every change can be undone.

Across 3 tasks on UISet's kits, agents using the bridge made 40% fewer tool calls, read 79% less text and finished 40% sooner than agents using browser tools, and every run of both finished its task (medians of 3 runs each).

Tool calls: −40%
Text read: −79%
Time: −40%

The benchmark, the method and a live demo

Five skins, one set of components

A skin is pure CSS: colors, type, edges, sound and motion. Keyboard, focus, screen reader and agent behavior stay the same in every one, and each is checked for contrast in every component. Skins nest, so one page can mix them, and the generator makes your own.

Make your own theme from one color

Tested like the infrastructure it is

A UI library is only as good as its worst state. These run on every change.

Accessibility: Every component, kit and template is checked with axe in every skin and theme: text contrast, control edges, names and roles.
Keyboard: Each kit is driven by keyboard in its tests: moving cards, editing cells, drawing events, writing rich text.
Agents: Each kit has a test where an agent reads it and acts through UI SDK’s bridge, by the names people see.
Mutation tests: Each new behavior is broken on purpose to prove a test notices, then restored.
Installs: Every item is installed on its own and all together into a fresh app, then type-checked and built.
The rest: Right-to-left, Windows high contrast, reduced motion, phone widths, and React and web versions side by side.

Start in three steps

Add the root
It brings the tokens, the skins and the sound, into your project’s components folder.
pnpm dlx shadcn@latest add superzero11/uiset/uiset

Wrap your app

Every UISet and UI SDK component inside takes the skin. With a shadcn theme on the page, the base skin uses it.

app.tsx

import { UISet } from "@/components/ui/uiset"

export function App() {
  return <UISet skin="base">{/* your app */}</UISet>
}

Add what you need
Components, kits or a whole page, each with one command.
pnpm dlx shadcn@latest add superzero11/uiset/button superzero11/uiset/field superzero11/uiset/data-grid

Installation covers manual setup, fonts and Web Components.

React, or anything that renders HTML

Every kit and template also ships as Web Components with the same styles and behavior, for Vue, Svelte, Solid, Angular and plain HTML.

notes.tsx

import { RichTextEditor } from "@/components/ui/rich-text"
import { UISet } from "@/components/ui/uiset"

<UISet skin="ink">
  <RichTextEditor label="Release notes" defaultValue="## Release 2.4" />
</UISet>

Questions

Where it’s going

UISet grows with UI SDK. What’s next, in the open:

More skins: Cockpit (guarded switches and gauges), Paper (cards and tape) and Print (brutalist type), each with its own sound.
Framework guides: Step-by-step setups for Vue, Svelte, Solid and Angular with the Web Components build.
More templates: Onboarding, a settings console wired for agents, and a docs site.
Following UI SDK: UISet tracks UI SDK’s releases, and reports the issues it finds upstream, until UI SDK 1.0.

The full roadmap

Build the whole interface on UI SDK.

UI SDK gives you behavior. UISet gives you everything else.

UISet

UI SDK

Everything a product needs, in one set

Kits you’d otherwise build yourself

Agents can use it, not just look at it

Five skins, one set of components

Base

Blueprint

Studio

Phosphor

Ink

Tested like the infrastructure it is

Start in three steps

Add the root

Wrap your app

Add what you need

React, or anything that renders HTML

Questions

Where it’s going

Build the whole interface on UI SDK.

UI SDK gives you behavior. UISet gives you everything else.

UISet

UI SDK

Everything a product needs, in one set

Kits you’d otherwise build yourself

Agents can use it, not just look at it

Five skins, one set of components

Base

Blueprint

Studio

Phosphor

Ink

Tested like the infrastructure it is

Start in three steps

Add the root

Wrap your app

Add what you need

React, or anything that renders HTML

Questions

What is UISet?

How is it different from shadcn/ui?

Do I have to use React?

Can AI agents use what I build with it?

Can my coding agent build with it?

Is it free, and who owns the code?

Is it ready for production?

Is UISet made by Vercel?

Where it’s going