Capítulo 1 de 51

Chapter 1: Introduction

Core Idea

Base UI is an unstyled, accessible React component library from the creators of Radix, Material UI, and Floating UI — headless (no bundled CSS, works with any styling engine), fully composable APIs, and WAI-ARIA-driven accessibility as the primary design goal.

Key Concepts

  • Package: @base-ui/react — a single package, tree-shakable, contains all components and utilities.
  • Headless: no CSS shipped, no prescribed styling solution — works with Tailwind, CSS Modules, plain CSS, or CSS-in-JS.
  • Composable: component APIs are fully open — direct access to each part/node, parts can be added, removed, or wrapped freely.
  • Accessible by default: adheres to WAI-ARIA design patterns, tested across browsers/devices/screen readers.
  • Origin: built by the team behind Radix UI, Material UI, and Floating UI — Base UI is their unified successor project, not a fork of any one of them.
  • React support: React 17+; works with Vite, webpack, Turbopack, Parcel.
  • shadcn/ui foundation: shadcn/ui now uses Base UI as its unstyled foundation (via the shadcn create tool) — this is the same relationship Radix Primitives used to have with shadcn/ui in earlier versions.
  • Notable styled libraries built on Base UI: Kumo (Cloudflare), coss ui (cal.com team), Fragments, 9ui, Prototyper UI, Lumi UI, Olyx UI, ReUI, Fig UI, Selia.
  • Unofficial ports: base-ui-solid (SolidJS), base-ui-vue (Vue), radix-ng (Angular, adapts Base UI architecture).
  • Community: GitHub (github.com/mui/base-ui) for issues/contributions, Discord for support, X/Bluesky for announcements, GitHub Releases for changelog notifications.

Key Takeaways

  1. Base UI is the spiritual merger of Radix + Material UI + Floating UI expertise — evaluate it as a modern alternative to Radix Primitives, not a wrapper around it.
  2. As of this documentation, shadcn/ui's underlying primitive layer is Base UI — projects generating components via npx shadcn create Base-UI-backed components.
  3. Headless means you own 100% of the visual layer; budget for both functional (positioning/sizing) and presentational CSS from day one — see ch005 (Styling).

Connects To

  • ch002 (Getting Started): installation and required app-shell setup (portal stacking, iOS Safari fix).
  • ch005 (Styling) / ch006 (Animation): how the unstyled layer is meant to be dressed.
  • radix-primitives-docs: sibling skill for Radix Primitives — see this skill's Scope & Limits for how to choose between them.
PróximoChapter 2: Getting Started