Coming from shadcn/ui
What maps to what, the API differences, and how to move a shadcn/ui app over one component at a time.
UISet installs with the same CLI into the same folder, and its base skin adopts your shadcn theme. What changes is underneath: components are UI SDK's, so keyboard, focus, screen reader and agent behavior come built in, and the API follows UI SDK's.
Moving an app over
-
Commit first. UISet items have the same file names as shadcn's (
components/ui/button.tsx), and the CLI asks before it overwrites one. -
Add the root and wrap the app. Your theme variables are picked up as they are:
pnpm dlx shadcn@latest add superzero11/uiset/uisettsx <UISet skin="base"> <App /> </UISet> -
Replace components one at a time, starting with leaves (button, badge, input) and then the composite ones (dialog, select, menu). Each item is independent, so the app keeps working between steps.
-
Run your tests. Selectors by role and name keep working; selectors on Radix's
data-stateneed the UI SDK attributes below.
What maps to what
| shadcn/ui | UISet item | Notes |
|---|---|---|
| Button | button | variant: solid (default), outline, ghost |
| Input, Label, Form | field | Field, FieldLabel, Input, FieldDescription, FieldError; native forms, no form library needed |
| Select | select | SelectTrigger shows the chosen value by itself; SelectLabel names it |
| DropdownMenu | menu | Menu, MenuTrigger, MenuContent, MenuItem; handle onAction on the menu |
| Dialog | dialog | Dialog, DialogTrigger, DialogContent, DialogTitle, DialogClose; no Header or Footer parts, use your own markup |
| AlertDialog | alert-dialog | Same parts with an AlertDialog prefix |
| Sheet | drawer | Drawer, with snap points and a handle |
| Popover, Tooltip, HoverCard | popover, tooltip, hover-card | Same idea, UI SDK's parts |
| Tabs | tabs | TabsTab for TabsTrigger, TabsPanel for TabsContent |
| Accordion | accordion | AccordionItem, AccordionTrigger, AccordionPanel for AccordionContent |
| Command | command | CommandInput, CommandList, CommandItem, CommandEmpty |
| Toast (Sonner) | toast | toast("Saved", { description }), with a ToastRegion in the app |
| Checkbox, Switch, Slider, RadioGroup | checkbox, switch, slider, radio | Same use; Slider takes a number or an array |
| Calendar, DatePicker | calendar, date-picker | Plus date-input and time-input for typed dates |
| Table, DataTable | data-grid | Sorting, filters, grouping, pinning, editing and virtual rows built in |
| Card, Badge, Alert, Skeleton, Breadcrumb | card, badge, alert, skeleton, breadcrumbs | See App frame and data display |
| Sidebar | app-shell | A sidebar that collapses to icons and becomes a drawer on phones |
| Chart (Recharts) | line-chart, bar-chart, … | No chart library: keyboard-explorable, with a table view |
Things shadcn/ui doesn't have: the chat kit, a rich text editor, board, scheduler, canvas, IDE, terminal, the Agent Console and whole-page templates.
API differences
asChildbecomesrender.<Button asChild><a href="/">Home</a></Button>is<Button render={<a href="/" />}>Home</Button>.- State attributes. Radix's
data-state="open"anddata-state="checked"aredata-openanddata-checked(alsodata-pressed,data-highlighted,data-disabled). Every part has adata-slot, likedata-slot="dialog-content". - Change handlers are
onValueChange,onOpenChange,onCheckedChangeandonPressedChange, with a seconddetailsargument that says why it changed (a click, a key, an agent) and can cancel it. - Styling. UISet ships plain CSS in cascade layers, not Tailwind classes. Tailwind keeps working beside it: put a class on any part, and since your utilities aren't in UISet's layers, they win.
- Names for agents. UI SDK's agent bridge finds controls by their accessible names.
A control with a visible label is already named; an icon button needs
aria-label.
Theme
Nothing to change: the base skin reads --background, --foreground, --muted,
--muted-foreground, --border, --input, --primary and --radius. To set the
accent without a shadcn theme, pass keyColor, or try one in the
theme generator, which also exports shadcn/ui variables. See Theming.