Migrate from Radix to React-Aria Components

[zxti]

The Radix UI primitives library has largely been unmaintained for a long time, and bugs let alone features don't get movement.

With all due respect to the great work that the Radix team invested, I can recommend React Aria Components (I'm unaffiliated).

• Similar API, I easily migrated from Radix while applying shadcn's styles
• Many more components, e.g. date range picker
• More flexible, can drop down to hooks
• Better performance
• Fewer dependencies
• Actively maintained and further developed
• Backed by Adobe engineering team, Devon Govett, et al

[rolanday]

React-aria and react-aria-components are top-tier. Not as easy to get going with as Radix/Shadcn/MUI, etc., but offers much more control in return. Really comes down to if want to experience a little frustration up front (the steeper learning curve) or frustration down the road (hitting limits of UI library you built your entire application around). Can't speak to RadixUI primitives investment level, but react-aria team is very invested and quick to respond to tickets/ discussions on Github -- I've been very impressed. Like I said ... top-tier.

[digitallemoon]

@zxti, can you provide a couple of examples on how to migrate the components to React Aria from Radix while keeping Shadcn's styles? Thanks!

[jolbol1]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff.

Heres some examples I did quickly to show its possibility. Using the checkbox, combobox, popover, tooltip and button.

For the button I havent worked on an asChild replacement yet as I didnt have time. Live page: https://www.shadcn-aria.com

Repo: https://github.com/jolbol1/shadcn-aria

[Callumk7]

A spinoff of the same design system implemented for react-aria would make more sense to me as a sister project, rather than a migration

[jolbol1]

Agreed, although as is the point of Shadcn, if React-Aria does a certain component better (like combobox in my opinion) it should be used. So maybe we will see its implementation in the future for areas Radix doesnt cover, or has bugs / lacks updates.

[IGassmann]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff.

@tailwindlabs has been working on a component library similar to shadcn/ui that uses React Aria Component. Check out https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap for more

[Krish-Das]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff.

Heres some examples I did quickly to show its possibility. Using the checkbox, combobox, popover, tooltip and button.

For the button I havent worked on an asChild replacement yet as I didnt have time. Live page:https://shadcn-aria.vercel.app/

Repo: https://github.com/jolbol1/shadcn-aria

How would I implement the asChild prop in React-aria-component? I have tried it, I attatched the component code below. But I don't think I am going in right direction.

button.md

[jolbol1]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff. Heres some examples I did quickly to show its possibility. Using the checkbox, combobox, popover, tooltip and button. For the button I havent worked on an asChild replacement yet as I didnt have time. Live page:https://shadcn-aria.vercel.app/ Repo: https://github.com/jolbol1/shadcn-aria

How would I implement the asChild prop in React-aria-component? I have tried it, I attatched the component code below. But I don't think I am going in right direction.

button.md

I think the consensus from their side of things is that you don't,

We think there are usually better ways to solve individual issues that come up than a blunt instrument like as or asChild. In the case of pre-fetch, using a hook in your own wrapper component would probably be a better approach. We’ll definitely add more features to the API as they come up though!

https://github.com/adobe/react-spectrum/issues/5476

Why do you need asChild? If its for links they have support for this using the Link component which supports NextJs, Remix and React Router - https://react-spectrum.adobe.com/react-aria/Link.html

You can then just style this with the ButtonVariants

My implementation for https://www.shadcn-aria.com on a branch im yet to release is this

const _Link = ({ className, variant, size, ...props }: _LinkProps) => {
  return (
    <Link
      className={(values: LinkRenderProps) =>
        cn(
          buttonVariants({
            variant,
            size,
            className:
              typeof className === "function" ? className(values) : className,
          })
        )
      }
      {...props}
    />
  )
}

[pawelblaszczyk5]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff.

@tailwindlabs has been working on a component library similar to shadcn/ui that uses React Aria Component. Check out https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap for more

Small update here, they've decided to ditch the RAC part and move forward with their HeadlessUI library. https://twitter.com/adamwathan/status/1729230772383473982

[Krish-Das]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff. Heres some examples I did quickly to show its possibility. Using the checkbox, combobox, popover, tooltip and button. For the button I havent worked on an asChild replacement yet as I didnt have time. Live page:https://shadcn-aria.vercel.app/ Repo: https://github.com/jolbol1/shadcn-aria

How would I implement the asChild prop in React-aria-component? I have tried it, I attatched the component code below. But I don't think I am going in right direction. button.md

I think the consensus from their side of things is that you don't,

We think there are usually better ways to solve individual issues that come up than a blunt instrument like as or asChild. In the case of pre-fetch, using a hook in your own wrapper component would probably be a better approach. We’ll definitely add more features to the API as they come up though!

adobe/react-spectrum#5476

Why do you need asChild? If its for links they have support for this using the Link component which supports NextJs, Remix and React Router - https://react-spectrum.adobe.com/react-aria/Link.html

You can then just style this with the ButtonVariants

My implementation for https://shadcn-aria.vercel.app/ on a branch im yet to release is this

const _Link = ({ className, variant, size, ...props }: _LinkProps) => {
  return (
    <Link
      className={(values: LinkRenderProps) =>
        cn(
          buttonVariants({
            variant,
            size,
            className:
              typeof className === "function" ? className(values) : className,
          })
        )
      }
      {...props}
    />
  )
}

Sometimes you need to style the links as button. SoasChild can be useful.

[jolbol1]

Sometimes you need to style the links as button. SoasChild can be useful.

Apologies if that wasnt clear but you can achieve exactly that using buttonVariants https://ui.shadcn.com/docs/components/button#:~:text=You%20can%20use%20the%20buttonVariants%20helper%20to%20create%20a%20link%20that%20looks%20like%20a%20button.

If you are using react-aria-components their Link component has support for NextJS, Remix and React Router as well, you just have to add a provider: https://react-spectrum.adobe.com/react-aria/routing.html

Examples of doing that here: https://www.shadcn-aria.com/docs/components/link

I don't think this issue is the best place for this discussion to continue however. Feel free to message me if you need more help.

[Krish-Das]

Sometimes you need to style the links as button. SoasChild can be useful.

Apologies if that wasnt clear but you can achieve exactly that using buttonVariants https://ui.shadcn.com/docs/components/button#:~:text=You%20can%20use%20the%20buttonVariants%20helper%20to%20create%20a%20link%20that%20looks%20like%20a%20button.

If you are using react-aria-components their Link component has support for NextJS, Remix and React Router as well, you just have to add a provider: https://react-spectrum.adobe.com/react-aria/routing.html

Examples of doing that here: https://www.shadcn-aria.com/docs/components/link

I don't think this issue is the best place for this discussion to continue however. Feel free to message me if you need more help.

Ok, let me try this!

[Krish-Das]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff.

Heres some examples I did quickly to show its possibility. Using the checkbox, combobox, popover, tooltip and button.

For the button I havent worked on an asChild replacement yet as I didnt have time. Live page: https://www.shadcn-aria.com

Repo: https://github.com/jolbol1/shadcn-aria

You didn't pass ref to the button, did you?

[jolbol1]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff. Heres some examples I did quickly to show its possibility. Using the checkbox, combobox, popover, tooltip and button. For the button I havent worked on an asChild replacement yet as I didnt have time. Live page: https://www.shadcn-aria.com Repo: https://github.com/jolbol1/shadcn-aria

You didn't pass ref to the button, did you?

No it shouldn't be hard to add it back if needed. Just follow something close to what this library has

[Krish-Das]

There are some fundamental differences in the way Radix and React Aria work but I think its definitely achievable. I'd doubt that shadcn will want to switch out from here, but someone could create their own shadcn spinoff. Heres some examples I did quickly to show its possibility. Using the checkbox, combobox, popover, tooltip and button. For the button I havent worked on an asChild replacement yet as I didnt have time. Live page: https://www.shadcn-aria.com Repo: https://github.com/jolbol1/shadcn-aria

You didn't pass ref to the button, did you?

No it shouldn't be hard to add it back if needed. Just follow something close to what this library has

No, I've done it!

[brandonmcconnell]

@zxti @Krish-Das Thanks for opening and working on this. I would also love to start a new project on shadcn-ui, but it feels like tech debt that I'll inevitably need to swap for React-aria eventually once this is ready.

How much work is left on this, and is there any way I can help?

[Krish-Das]

@zxti @Krish-Das Thanks for opening and working on this. I would also love to start a new project on shadcn-ui, but it feels like tech debt that I'll inevitably need to swap for React-aria eventually once this is ready.

How much work is left on this, and is there any way I can help?

I just built the Link component with react aria. It accepts as prop

[brandonmcconnell]

@Krish-Das Nice! Lmk where I can jump in

[rolanday]

"A spinoff of the same design system implemented for react-aria would make more sense to me as a sister project, rather than a migration"

-- Not the same design as shadcn, but there is a spin-off fw build on area call next: https://nextui.org -- There is also Adobe's own Adobe Spectrum, which is built on top of React-Aria

If I were looking for something turn-key then react-aria or react-aria-components then I'd go w/ nextui rather than try to reinvent the wheel.

[Saadchr]

@rolanday NextUi is built on top of React Aria hooks not on react aria components

[rolanday]

@Saadchr , thanks for the clarification, but I didn't suggest otherwise :-)

I build most of my UI on hooks as well, but may transition some to RAC now that they've released 1.0 -- still doesn't compete w/ the flexibility hooks though, which IMO is the main benefit of hooks. Still, the nice thing about building on rac, or something like NextUI, is you can fall back to hooks for advanced use cases w/o needing to introduce another dependency.

[brandonmcconnell]

All that to say, there's a lot of intrinsic value in shadcn-ui, and it would be a huge value-add to refactor it atop react-aria.

Speaking for myself, I would rather use shadcn-ui as is rather than a separate "sibling" repo. I think a migration to react-aria or similar is the logical choice.

[jolbol1]

All that to say, there's a lot of intrinsic value in shadcn-ui, and it would be a huge value-add to refractor it atop react-aria.

Speaking for myself, I would rather use shadcn-ui as is rather than a separate "sibling" repo. I think a migration to react-aria or similar is the logical choice.

I agree with this. As someone who has made the spin-off, I dont intend to update it beyond when I personally need too. Its up to ShadCN and other maintainers when they see that react-aria-components is better suited to whatever component. This is the benefit of the shadcn component collection, it can be pick and mix between libraries like radix and react aria.

The best example of one I think should be added it the combobox, as the current implementation of cmdk is a bit overkill for some uses.

Also excited to see what headless-ui will bring to the table now its going to be actively maintained and used by tailwinds catalyst.

[sadeghbarati]

What is the equivalent of preventDefault events in React-Aria?

For example, I want to keep Select Popover open when I select an item

Update: https://github.com/adobe/react-spectrum/discussions/5730

[rolanday]

All that to say, there's a lot of intrinsic value in shadcn-ui, and it would be a huge value-add to refractor it atop react-aria.

react-aria and radix-ui are fundamentally different in their designs, and not practical to try and refactor "shadcn-ui" atop react-aria. shadcn-ui is not a library, but rather it brings tailwind bindings and pleasing styles to radix-ui and other frameworks (embla, react-resizable-panels, cmdc, etc.) under on umbrella. This has value and hence popularity of shadcn, but not to be confused with being an actual UI framework (the shadcn docs even state as much).

radix-ui has since added tailwind bindings, so no longer a benefit of shadcn. I like the shadcn styles and they're easy enough to copy over to react-aria. For those who can't be bothered, there is a new "library" called jolly-ui that is analogous to shadcn but for react-aria:

https://www.jollyui.dev

(I have no affiliation with jollyui whatsoever)

This is the benefit of the shadcn component collection, it can be pick and mix between libraries like radix and react aria.

True, however, mixing and matching radix and react-aria is going to really bloat your payload.

[brandonmcconnell]

@rolanday The idea is to replace Radix UI with React Aria here.

The library you mentioned, Jolly UI, is actually a key motivator here. Its creator, @jolbol1, mentioned a few comments up in this thread that his intention was only to it until shadcn-ui makes the switch to those components.

The creation of Jolly UI was primarily to ease that transition.

---

This is all to the best of my knowledge. @jolbol1 please correct me if I'm speaking out of turn here.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[brandonmcconnell]

@shadcn Would you mind reopening and considering this one? It would be great to get the ui package built upon react-aria for maximum accessibility gains.

[devongovett]

Hey! Let me know if there's anything you need help with on this. Would be great to see some React Aria Components in shadcn/ui, even just in future additions to the library. 😊

[junwen-k]

A rather ambitious way of going with this is perhaps having both Radix UI and RAC supported in this repository. When user uses the CLI they can pick which headless UI framework they want to use. The property can also be saved in component.json. E.g,

components.json

{
  "headless-ui-framework": `radix-ui` | `react-aria-components`
}

The CLI would then copy the correct components based on this property. However having the need to maintain both frameworks would be very time consuming, and some components might be missing from each other. 👀