Product Thumbnail

Webstudio meets Radix UI

Radix UI now available for Visual Developers in Webstudio

Design Tools
Website Builder
Web Design

Design unique user interfaces with dropdowns, dialogs, forms, navigation menus, tooltips, and more. Simply drag, drop and style the Radix component on your canvas, without writing any code.

Top comment

Hi, this is Oleg, founder of Webstudio. My team and I are excited to unveil our Radix UI (shadcn) integration, unlocking accessibility and customization superpowers only developers had access to. 🚀🎉 Radix UI is the first components library we have added to the builder. Soon, you will be able to add other libraries as well once we launch the public API.

Why Radix UI

Radix UI is two steps ahead of plain HTML. The library is accessible, unstyled, and open, catering to the diverse needs of designers and developers. Accessible: Radix UI places accessibility at its core, ensuring that your designs are not only visually appealing but also user-friendly for everyone. The library's adherence to the WAI-ARIA specification makes your web content accessible to users, regardless of their abilities. Unstyled: Coupled with Design Tokens, Radix UI empowers you with complete control over styling, letting you create designs that are truly unique and aligned with your vision. Opened: With granular access over each component part, you can customize the Radix components to suit your design needs. Just like Webstudio, Radix is also open-source. 💚

Comment highlights

Great job Oleg! Major props for unveiling the Radix UI integration in Webstudio! Combining accessibility, unstyled components, and open customization is a winning formula. How do you see the synergy between Radix UI and other libraries enhancing the development experience?

Webstudio's integration with Radix UI is a game-changer! It's like combining the precision of a master chef with the versatility of a Swiss army knife. The result? A web development experience that's as smooth as silk. Radix UI's component library adds a touch of elegance to Webstudio's already impressive toolkit. From beautifully designed dropdowns to responsive modals, it's a visual treat for developers and end-users alike. The way these components seamlessly blend into Webstudio's interface is a testament to thoughtful design and engineering. But it's not just about looks. The functionality is top-notch too. Radix UI's focus on accessibility and performance ensures that your web applications are not just pretty but also fast and inclusive. In a world where user experience is paramount, Webstudio and Radix UI are a power couple that every developer should consider. They've set the bar high, and I can't wait to see what they do next!

Webstudio Meets Radix UI could bridge the gap between design and development. How does it handle responsive design challenges for different devices?

Webstudio's promise of efficient design workflows is appealing. How does it ensure that the generated code is clean and optimized?

Impressed by Webstudio's integration with Radix UI components. Can designers also import their own UI libraries for customization?

Webstudio Meets Radix UI's collaboration potential is exciting. How does it sync design changes in real-time for remote teams?

As a UI designer, Webstudio Meets Radix UI caught my attention. Can it provide code suggestions that align with specific design patterns?

I am currently training to become a product builder. I am learning Webflow as part of my curriculum but really I intend to use open source and free tools because I think the No-code revolution has to be accessible to the global south. Keep on making this product better! I'm coming!

Awesome, I appreciate the free plan, can't wait to build a project. Thanks web studio