ShadowJSShadowJSv1.0.0
[]previous and next page

Migration steps

Migration steps in the Migrating from shadcn/ui and Radix guide.

For agentsUpdated
  1. Install @shadow-js/primitives next to @shadow-js/core and @shadow-js/web. Copy the helpers in The shadcn helpers to src/lib/utils.ts.
  2. For each shadcn file, replace import * as XPrimitive from "@radix-ui/react-x" with import { X as XPrimitive } from "@shadow-js/primitives". The part names are the same.
  3. Delete React.forwardRef and displayName; take props and spread mergeElementProps({ class: "..." }, props).
  4. Rename className to class and asChild to as.
  5. Replace lucide-react icons with inline SVG components (or any SVG library that renders elements).
  6. Replace cva and cn with variants and cn from src/lib/utils.ts, or keep class-variance-authority, clsx and tailwind-merge if you install them: they are plain functions that return strings. is synchronous, and outside presses need fireEvent.pointerDown.
  7. Run the Tailwind setup from Tailwind.