Radix for Vue is finally available!

Created by human

What is Radix UI?

Radix UI is a headless and unstyled component library that gives us great flexibility and top-tier accessibility out of the box. Opinionated UI libraries are great and provide quick development but sometimes it's hard to restyle the components or tailor them to specific use cases. In Radix UI, you are building your components out of highly accessible primitives so you have full control over the implementation.

Why would I use it?

Someone can say: "So if I still have to build some higher order component on top of those primitives and style them, what's the benefit of it?"

Let's compare the advantages and disadvantages of building components from scratch vs using an opinionated UI library:

Building components from scratch

advantagesdisadvantages
full control over component logicaccessibility is hard
easier to apply fully custom stylesdevelopment takes longer
no external dependencyfor complex UI components you have to create good docs for other devs

Using an opinionated UI library

advantagesdisadvantages
fast developmentno full flexibility
accessibility out of the boxyou can hit the limitations of the package
docs are already thereharder to restyle
fewer bugs because it's maintained by many peopleexternal dependency

What Radix UI is trying to do is fit kind of in the middle of those scenarios. You have to build your own components, so you have to take care of styling and putting all the pieces together but because you are using those primitives, you don't have to worry about accessiblity and you have some basic component logic provided to you. Sadly, Radix UI was only available for React, but not anymore! 🥳

Now, the Vue version is available

Thanks to the outstanding work of contributors, Radix Vue is finally available! 🥳 It's one of the first beta releases, so don't let a small number of GitHub stars discourage you! It's not yet 100% finished but you can track the progress of porting here.

porting progreess

Summary

I'm really glad that Radix UI is being ported from React ecosystem. It's a great way to build your custom components with a little help from Radix primitives. By doing that you don't have to fear some potential limitations or struggle with overriding the default styles. Huge kudos to Radix Vue team for great work!