Radix Is Dead, Use This Instead... (Base UI)

Highlights

• Base UI is a headless library from the creators of Radix

Timeline

1. 00:00 - 01:06

   Introduction to Base UI and the State of Radix

   The speaker introduces Base UI as the new go-to headless UI library for React developers, particularly those who previously used Radix or Shadcn. Developed by the original creators of industry standards like Material UI, it focuses on providing core functionality and accessibility while leaving the design to the developer. The video notes that while Radix provided similar benefits, the industry is shifting toward Base UI due to evolving needs. The documentation is highlighted for its high quality and support for various styling methods like CSS Modules and Tailwind. This section sets the stage for a detailed comparison between the old standard and the new contender.

2. 01:07 - 02:11

   Maintenance Disparity and the 'Zombie State' of Radix

   A critical look at the GitHub activity reveals a stark contrast between Base UI and Radix, with Radix showing almost no recent contributions. The speaker explains that after WorkOS acquired the team behind Radix, investment stalled and key creators moved on to work on Base UI. Statistical evidence is provided, showing Base UI merging over 150 pull requests while Radix merged none in the same period. This lack of maintenance makes Radix a risky choice for future-proofing applications against bugs. Choosing Base UI ensures that developers are using a library that will actually receive updates and security fixes.

3. 02:12 - 04:30

   Improving the Developer Experience: Render Props vs. asChild

   The speaker dives into technical improvements, specifically focusing on how Base UI handles component composition compared to Radix's 'asChild' prop. While Radix used 'asChild' to merge functionality into children, Base UI adopts a more explicit 'render' prop pattern. This section demonstrates how the render prop can take a function to access the internal state of a component, such as whether a switch is checked. This allows for conditional rendering of icons or styles directly within the component structure. Such a pattern is presented as being more readable and less prone to being overlooked during code reviews.

4. 04:31 - 06:07

   Data-Driven Components and Server-Side Rendering

   Base UI introduces a data-driven approach for complex components like Select, where items are passed as a prop to the root element. This allows the component to be aware of its data before the rendering phase, leading to performance gains in server-side rendering (SSR) scenarios. The speaker compares this favorably to Radix, where mapping usually occurs exclusively in the children. However, a slight critique is offered regarding the redundancy of passing data both to the root and mapping it manually. The speaker suggests that Base UI could further improve by following patterns seen in React Aria. This section emphasizes the technical maturity and efficiency of the Base UI architecture.

5. 06:08 - 08:26

   New Components and Advanced Styling Choices

   The video highlights the inclusion of highly requested components that Radix lacked, such as the Multi-select, Combo Box, and Autocomplete. Beyond new components, Base UI offers a unique styling choice: the ability to use a function as a class name. This feature allows developers to pass the component's state, like 'disabled' or 'checked,' directly into styling utilities like Tailwind Variants. This method is contrasted with the traditional data-attribute approach, which can lead to long, hard-to-read strings in Tailwind. The speaker concludes that Base UI successfully bridges the gap between the simplicity of Radix and the power of React Aria.

6. 08:27 - 09:16

   Final Recommendations and Advanced Features

   The final section covers additional features including native support for React Hook Form, TanStack Form, and built-in animation support. Advanced UI patterns like input scrubbing and nested dialogues are also mentioned as part of the library's robust feature set. The speaker provides a pragmatic recommendation: while existing Radix projects don't need an immediate, urgent migration, all new projects should start with Base UI. The video ends with a call to action for developers to explore the library's active GitHub community for future requests. This summary reinforces the message that Base UI is currently the most viable path forward for React UI development.