What is Radix UI?

Radix Primitives is a set of low-level React components, such as Dialog, Dropdown Menu, Popover, Tooltip, Tabs and Select, that implement behavior and accessibility with no styles. It was created by the team at Modulz and is now maintained by WorkOS. Radix popularized the compound, headless approach in React and became the base of shadcn/ui, which made it one of the most widely installed UI dependencies in the ecosystem. The project also publishes Radix Themes, a styled library built on the primitives, and Radix Colors, a set of color scales.

How it works

Each primitive is a set of parts that share state through React context. State shows up as data-state attributes (open, closed, checked, active) that you target in CSS. The asChild prop merges a part's behavior into your own child element instead of rendering an extra DOM node.

import * as Dialog from "@radix-ui/react-dialog"

export function ConfirmDelete() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button className="rounded-lg border px-3 py-1.5">Delete</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/40" />
        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-1/2 rounded-xl bg-white p-6">
          <Dialog.Title>Delete project?</Dialog.Title>
          <Dialog.Description>This cannot be undone.</Dialog.Description>
          <Dialog.Close>Cancel</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

Radix and Base UI

Several of the original Radix authors went on to build Base UI together with the Floating UI and Material UI teams. The two libraries solve the same problem and look similar in code. The practical differences are in API details:

• Radix uses asChild for element composition; Base UI uses a render prop.
• Radix exposes state mostly through data-state; Base UI uses individual attributes such as data-open and data-checked.
• Base UI separates positioning into a Positioner part and ships components Radix does not, such as a combobox and a number field.
• shadcn/ui now lets you choose either library as the primitive layer, so the choice is no longer tied to the component collection you use.

Neither is a wrong choice. Radix has years of production use and a large body of examples; Base UI has a newer API and a broader component set. For an existing Radix codebase, there is rarely a reason to migrate everything at once.

How MiniDev UI relates

MiniDev UI builds on Base UI rather than Radix. If your project already uses Radix-based shadcn components, MiniDev components still install alongside them, because each one declares its own dependencies. Composition patterns differ, so when you mix them, check whether a trigger expects asChild or render. MiniDev's Dialog, Dropdown menu, Popover and Tooltip cover the same ground as their Radix counterparts.