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

  1. Commit first. UISet items have the same file names as shadcn's (components/ui/button.tsx), and the CLI asks before it overwrites one.

  2. Add the root and wrap the app. Your theme variables are picked up as they are:

    pnpm dlx shadcn@latest add superzero11/uiset/uiset
    tsx
    <UISet skin="base">
      <App />
    </UISet>
    
  3. 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.

  4. Run your tests. Selectors by role and name keep working; selectors on Radix's data-state need the UI SDK attributes below.

What maps to what

shadcn/uiUISet itemNotes
Buttonbuttonvariant: solid (default), outline, ghost
Input, Label, FormfieldField, FieldLabel, Input, FieldDescription, FieldError; native forms, no form library needed
SelectselectSelectTrigger shows the chosen value by itself; SelectLabel names it
DropdownMenumenuMenu, MenuTrigger, MenuContent, MenuItem; handle onAction on the menu
DialogdialogDialog, DialogTrigger, DialogContent, DialogTitle, DialogClose; no Header or Footer parts, use your own markup
AlertDialogalert-dialogSame parts with an AlertDialog prefix
SheetdrawerDrawer, with snap points and a handle
Popover, Tooltip, HoverCardpopover, tooltip, hover-cardSame idea, UI SDK's parts
TabstabsTabsTab for TabsTrigger, TabsPanel for TabsContent
AccordionaccordionAccordionItem, AccordionTrigger, AccordionPanel for AccordionContent
CommandcommandCommandInput, CommandList, CommandItem, CommandEmpty
Toast (Sonner)toasttoast("Saved", { description }), with a ToastRegion in the app
Checkbox, Switch, Slider, RadioGroupcheckbox, switch, slider, radioSame use; Slider takes a number or an array
Calendar, DatePickercalendar, date-pickerPlus date-input and time-input for typed dates
Table, DataTabledata-gridSorting, filters, grouping, pinning, editing and virtual rows built in
Card, Badge, Alert, Skeleton, Breadcrumbcard, badge, alert, skeleton, breadcrumbsSee App frame and data display
Sidebarapp-shellA 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

  • asChild becomes render. <Button asChild><a href="/">Home</a></Button> is <Button render={<a href="/" />}>Home</Button>.
  • State attributes. Radix's data-state="open" and data-state="checked" are data-open and data-checked (also data-pressed, data-highlighted, data-disabled). Every part has a data-slot, like data-slot="dialog-content".
  • Change handlers are onValueChange, onOpenChange, onCheckedChange and onPressedChange, with a second details argument 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.