Setting the file. One moment.
Skill 01 · Migrate Radix To Base
Subchapter 1.1
class-mapping.mdMarkdown3 KBView on GitHub
Apply these across ALL class strings (className, cva definitions, cn calls), including app code. They are safe, mechanical rewrites.
| Radix pattern | Base UI pattern |
|---|---|
data-[state=open]: | data-open: |
data-[state=closed]: | data-closed: |
data-[state=checked]: | data-checked: |
data-[state=unchecked]: | data-unchecked: |
data-[state=active]: (tabs) | data-active: |
data-[state=on]: (toggle) | data-pressed: |
data-[highlighted]: | data-highlighted: (unchanged) |
data-[disabled]: | data-disabled: (unchanged) |
data-[side=...]: | data-[side=...]: (unchanged, still parameterized) |
group-data-[state=open] / peer-data-[state=open] | group-data-open / peer-data-open |
submenu trigger open marker data-[state=open]: | data-popup-open: |
Radix (tw-animate/keyframes):
data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0
Base UI (transition + starting/ending styles):
transition-[opacity,transform] data-starting-style:opacity-0 data-ending-style:opacity-0 (plus translate/scale equivalents).
Do not translate animate-in/out utilities 1:1; restate the intent with
data-starting-style: / data-ending-style: transitions. When the original
uses per-side slide classes, keep the data-[side=...] or
data-[swipe-direction=...] parameterization.
| Radix var | Base UI var |
|---|---|
--radix-<comp>-content-transform-origin | --transform-origin |
--radix-<comp>-content-available-height | --available-height |
--radix-<comp>-content-available-width | --available-width |
--radix-<comp>-trigger-width | --anchor-width |
--radix-<comp>-trigger-height | --anchor-height |
--radix-accordion-content-height | --accordion-panel-height |
--radix-collapsible-content-height | --collapsible-panel-height |
--radix-navigation-menu-viewport-height/width | --positioner-height / --positioner-width |
When a part’s rendered element changes from a form control to a generic
element (checkbox/switch/radio Roots render <span> in Base UI), disabled:
and :disabled Tailwind variants become dead code. Replace them with
data-disabled: equivalents. (Note: the shadcn base registry’s checkbox
still carries the dead disabled:* classes; treat that as an upstream quirk,
not a pattern to copy.)
Some Base UI triggers surface disabled state as aria-disabled rather than
the disabled attribute (accordion trigger, tabs tab). Where the radix code
used disabled:opacity-50, add or substitute aria-disabled:opacity-50
according to the wrapper’s reference file.