Introduction
What UISet is, how it relates to UI SDK and shadcn/ui, and what's in it.
UISet is the components, kits, page templates and themes for Vercel's UI SDK. It's open source, installs with the shadcn CLI, and works in React and, through Web Components, in Vue, Svelte, Solid, Angular and plain HTML.
pnpm dlx shadcn@latest add superzero11/uiset/uisetWhy it exists
UI SDK moved the hard part of UI into reusable behaviors: arrow keys, focus, selection, dismissal, popups, drag and drop, and the ARIA that goes with them. Its 55 components are built from those behaviors, and its agent bridge lets AI agents read a page and work its controls without screenshots.
Two things it leaves to you:
- How it looks. UI SDK's components are unstyled.
- The large components apps are made of. There's no data grid, chat, rich text editor, scheduler, board, node canvas, IDE or terminal.
UISet fills both, without changing the behavior underneath. Everything is still UI SDK's: the same parts, the same names, the same keyboard and agent support.
What's in it
| What | How many | What it gives you |
|---|---|---|
| Components | 55, plus 16 app parts | Every UI SDK component, styled; and the app frame and data display parts (sidebar layout, page header, cards, badges, stats, alerts, a stepper) |
| Kits | 12 | Chat, rich text, data grid, charts, board, scheduler, canvas, IDE, mobile, terminal, Studio and the Agent Console |
| Templates | 10 | Whole pages: auth, dashboard, settings, admin, inbox, chat app, project board, calendar, pricing, IDE |
| Themes | 5 skins | Base, Blueprint, Studio, Phosphor and Ink, plus a generator for your own |
Each piece is its own registry item: install only what you use, and it brings only what it needs.
How it works
- The root.
<UISet>wraps your app (or any part of it). It holds the skin, the light or dark setting, and the interaction sounds. Every UISet and UI SDK component inside takes the skin. - Skins are CSS. A skin sets CSS variables in a cascade layer. Behavior never depends on them, so you can switch skins live or nest one inside another.
- Your code. The shadcn CLI copies each item's source into
components/ui/. Change it as you like; items import each other relatively, so they keep working after you move them. - Named for agents. Every control has an accessible name, and each kit gives agents actions that mean something (a grid sorts and filters; a scheduler adds events).
Compared with shadcn/ui
shadcn/ui styles Radix UI; UISet styles UI SDK. If you know shadcn/ui, you know the workflow: the same CLI, the same folder, and UISet's base skin picks up your shadcn theme variables. What's different is underneath (UI SDK's behaviors and agent bridge) and what's included (the kits and templates). See Coming from shadcn/ui.
Status
UI SDK is in public beta (0.1.0-beta.2), and UISet pins that exact version. Every item is
tested for accessibility in every skin and theme, for keyboard use, for agent use, and for
a clean install into a new app. Expect API changes until UI SDK reaches 1.0; the
roadmap says what's next.
Next
- Installation: set up a project and add your first items.
- Quick start: a working screen in a few minutes.
- Building with AI agents: give your coding agent the skill and the docs.