base-ui-react

Migrate Radix UI components to Base UI equivalents in React projects.

204|30|Updated Nov 8, 2025

Search Tags:#accessibility #react #render-props #floating-ui #base-ui #unstyled

Ready to run

npx skills add https://github.com/secondsky/claude-skills --skill base-ui-react

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: base-ui-react
Source: https://github.com/secondsky/claude-skills/tree/main/plugins/base-ui-react/skills/base-ui-react
Command: npx skills add https://github.com/secondsky/claude-skills --skill base-ui-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @base-ui-components/react, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Provides a suite of unstyled, accessible UI components for React with a render-prop pattern.

Core Features & Use Cases

27+ accessible components with full styling control
Render props for maximum flexibility
Floating UI integration for popups and positioning
Mature pattern for Radix migrations and design systems

Quick Start

Install @base-ui-components/react, then start composing dialogs, selects, popovers, tooltips, and more with render props.

Frequently Asked Questions about base-ui-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I migrate from Radix UI to Base UI in React?▼

Base UI provides unstyled, accessible components with render props as drop-in replacements for Radix UI. This Skill covers migrating Dialog, Select, Popover, Tooltip, Accordion, and NumberField by handling render-props patterns, Positioner usage, Portal/Backdrop/Popup renaming, and TypeScript typings with automated scripts and migration references.

What's the difference between render props and component composition in React UI libraries?▼

Render props give you maximum control by passing functions that return JSX, letting you customize every aspect of styling and behavior. Base UI uses this pattern across 27+ accessible components, unlike styled-first libraries, enabling design system flexibility without fighting predefined styles.

Can I use Base UI components with floating UI for positioning?▼

Yes, Base UI integrates Floating UI for positioning popups, popovers, tooltips, and dropdowns. The Skill covers Positioner usage and floating component setup as part of the migration path, ensuring proper dropdown and overlay positioning out of the box.

Does Base UI handle accessibility automatically?▼

Base UI's 27+ components ship with full accessibility built in—ARIA attributes, keyboard navigation, and semantic HTML are included. This Skill addresses accessibility concerns during migration from Radix UI, ensuring your components remain compliant throughout the transition.

What do I need to install to start using Base UI React components?▼

Install @base-ui-components/react to access unstyled, accessible UI building blocks. This Skill includes setup guides and automated migration scripts to integrate Base UI into your existing React project alongside Radix UI equivalents.

Are there limitations I should know about when migrating to Base UI?▼

Base UI is in beta, so check compatibility with your TypeScript version and review the full migration references this Skill provides. The trade-off is complete styling control and flexibility—you manage all CSS rather than inheriting component styles.