Migrate from Radix to React-Aria Components #1622

zxti · 2023-09-28T22:08:49Z

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 · 2023-10-02T00:21:07Z

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 · 2023-10-03T12:35:41Z

@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 · 2023-10-11T23:45:02Z

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 · 2023-10-13T17:27:47Z

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 · 2023-10-13T18:25:28Z

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 · 2023-11-14T09:44:22Z

@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 · 2023-11-27T08:17:28Z

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 · 2023-11-27T17:46:35Z

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

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://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 · 2023-11-27T21:33:51Z

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 · 2023-11-28T03:54:30Z

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

jolbol1 · 2023-11-28T15:06:18Z

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 · 2023-11-29T10:12:22Z

Ok, let me try this!

Krish-Das · 2023-11-30T06:11:38Z

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

jolbol1 · 2023-11-30T18:50:43Z

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

Krish-Das · 2023-12-01T11:38:50Z

No, I've done it!

brandonmcconnell · 2023-12-21T21:19:23Z

@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 · 2023-12-22T09:28:47Z

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

brandonmcconnell · 2023-12-23T13:59:10Z

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

rolanday · 2023-12-23T17:40:36Z

"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 · 2023-12-23T22:40:21Z

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

rolanday · 2023-12-23T23:52:16Z

@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 · 2023-12-24T00:09:26Z

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 · 2023-12-26T14:07:49Z

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 · 2024-01-22T06:56:36Z

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: adobe/react-spectrum#5730

rolanday · 2024-01-22T08:24:54Z

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)

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

brandonmcconnell · 2024-01-22T08:51:15Z

@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 · 2024-02-27T23:43:08Z

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 · 2024-02-27T23:57:42Z

@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 · 2024-03-01T14:28:54Z

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 · 2024-04-25T14:59:07Z

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. 👀

shadcn added the Stale label Feb 14, 2024

shadcn closed this as completed Feb 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate from Radix to React-Aria Components #1622

Migrate from Radix to React-Aria Components #1622

zxti commented Sep 28, 2023

rolanday commented Oct 2, 2023

digitallemoon commented Oct 3, 2023

jolbol1 commented Oct 11, 2023 •

edited

Loading

Callumk7 commented Oct 13, 2023

jolbol1 commented Oct 13, 2023

IGassmann commented Nov 14, 2023

Krish-Das commented Nov 27, 2023 •

edited

Loading

jolbol1 commented Nov 27, 2023 •

edited

Loading

pawelblaszczyk5 commented Nov 27, 2023

Krish-Das commented Nov 28, 2023

jolbol1 commented Nov 28, 2023

Krish-Das commented Nov 29, 2023

Krish-Das commented Nov 30, 2023

jolbol1 commented Nov 30, 2023 •

edited

Loading

Krish-Das commented Dec 1, 2023

brandonmcconnell commented Dec 21, 2023

Krish-Das commented Dec 22, 2023

brandonmcconnell commented Dec 23, 2023

rolanday commented Dec 23, 2023

Saadchr commented Dec 23, 2023

rolanday commented Dec 23, 2023

brandonmcconnell commented Dec 24, 2023 •

edited

Loading

jolbol1 commented Dec 26, 2023 •

edited

Loading

sadeghbarati commented Jan 22, 2024 •

edited

Loading

rolanday commented Jan 22, 2024

brandonmcconnell commented Jan 22, 2024

shadcn commented Feb 27, 2024

brandonmcconnell commented Feb 27, 2024

devongovett commented Mar 1, 2024

junwen-k commented Apr 25, 2024

Migrate from Radix to React-Aria Components #1622

Migrate from Radix to React-Aria Components #1622

Comments

zxti commented Sep 28, 2023

rolanday commented Oct 2, 2023

digitallemoon commented Oct 3, 2023

jolbol1 commented Oct 11, 2023 • edited Loading

Callumk7 commented Oct 13, 2023

jolbol1 commented Oct 13, 2023

IGassmann commented Nov 14, 2023

Krish-Das commented Nov 27, 2023 • edited Loading

jolbol1 commented Nov 27, 2023 • edited Loading

pawelblaszczyk5 commented Nov 27, 2023

Krish-Das commented Nov 28, 2023

jolbol1 commented Nov 28, 2023

Krish-Das commented Nov 29, 2023

Krish-Das commented Nov 30, 2023

jolbol1 commented Nov 30, 2023 • edited Loading

Krish-Das commented Dec 1, 2023

brandonmcconnell commented Dec 21, 2023

Krish-Das commented Dec 22, 2023

brandonmcconnell commented Dec 23, 2023

rolanday commented Dec 23, 2023

Saadchr commented Dec 23, 2023

rolanday commented Dec 23, 2023

brandonmcconnell commented Dec 24, 2023 • edited Loading

jolbol1 commented Dec 26, 2023 • edited Loading

sadeghbarati commented Jan 22, 2024 • edited Loading

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

rolanday commented Jan 22, 2024

brandonmcconnell commented Jan 22, 2024

shadcn commented Feb 27, 2024

brandonmcconnell commented Feb 27, 2024

devongovett commented Mar 1, 2024

junwen-k commented Apr 25, 2024

jolbol1 commented Oct 11, 2023 •

edited

Loading

Krish-Das commented Nov 27, 2023 •

edited

Loading

jolbol1 commented Nov 27, 2023 •

edited

Loading

jolbol1 commented Nov 30, 2023 •

edited

Loading

brandonmcconnell commented Dec 24, 2023 •

edited

Loading

jolbol1 commented Dec 26, 2023 •

edited

Loading

sadeghbarati commented Jan 22, 2024 •

edited

Loading

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