Migrating from shadcn/ui and Radix
Port shadcn/ui components to ShadowJS on top of @shadow-js/primitives, with the Radix concept mapping, the parts the library does not have yet, and keyboard and ARIA behavior.
shadcn/ui is not a package. It is a set of components you copy into your project, built from four parts: Radix
primitives for behavior and accessibility, Tailwind classes for looks, class-variance-authority for variants, and a
cn() helper (clsx plus tailwind-merge). Only the Radix part is React-specific. This page moves each part to
ShadowJS.
| shadcn/ui part | In ShadowJS |
|---|---|
Radix primitives (@radix-ui/react-*) |
@shadow-js/primitives: see what exists |
forwardRef, asChild, Slot |
props.ref, the as prop, Polymorphic |
className |
class (string, array or object; see Tailwind) |
cva, cn |
cva and cn from @shadow-js/ui, or a short variants() helper and cn() with no dependency, written below |
| Lucide icons | Any SVG component; an inline SVG is shown below |
Radix Toast and the useToast store |
Toast and createToaster, below |
The primitives are part of ShadowJS 1.0.0. Their peer dependencies are @shadow-js/core and @shadow-js/web. What is missing lists Radix parts without a direct primitive.