skills.rest
aicodepro
aicodeproOFFICIAL
Explore all skills by this author →
GitHub

base-ui-react

Implements accessible unstyled React components using MUI Base UI with Floating UI positioning.

Updated Jun 22, 2026
Search Tags:#react#tailwind#render props#base ui#accessible components#floating ui#radix migration
One-click install
npx skills add https://github.com/aicodepro/ai-agent-nexi --skill base-ui-react-aicodepro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: base-ui-react
Source: https://github.com/aicodepro/ai-agent-nexi/tree/main/agent/skills/base-ui-react
Command: npx skills add https://github.com/aicodepro/ai-agent-nexi --skill base-ui-react-aicodepro

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? Building accessible React components from scratch is error-prone, and teams migrating from Radix UI face API mismatches around asChild, positioning, and portals. This Skill provides correct Base UI (v1.0.0-beta) patterns, templates, and migration guidance so components work with proper ARIA behavior and Floating UI positioning on the first attempt. ## Core Features & Use Cases - Component Templates: Ready-to-use TypeScript templates for Dialog, Select, Popover, Tooltip, Accordion, and NumberField using the render props pattern with Tailwind styling. - Radix UI Migration: A complete migration guide plus an automated shell script that converts imports, renames Content/Overlay to Popup/Backdrop, and flags asChild usages for manual conversion. - Positioning & Beta Guidance: Enforces the Positioner + Portal pattern required for Floating UI, and documents which components are stable versus risky in the beta release. - Use Case: A developer replacing Radix UI dialogs with Base UI runs the migration script, applies the Dialog template, and gets a working accessible modal with correct backdrop, portal, and focus behavior. ## Quick Start Ask the assistant to create an accessible Base UI dialog component with Tailwind styling, or to migrate a specific Radix UI component file to Base UI.

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?▼

Replace asChild with render props, rename Content to Popup and Overlay to Backdrop, change align to alignment, and wrap popups in a Positioner with an explicit Portal. The included migrate-radix-component.sh script automates import and renaming changes, leaving render prop conversion for manual fixes.

How do I create an accessible dialog with Base UI React?▼

Compose Dialog.Root, Trigger, Portal, Backdrop, Popup, Title, Description, and Close, styling each with className or render props. Base UI includes ARIA attributes and focus management built in, so no extra accessibility wiring is needed.

Base UI vs Radix UI: which should I use?▼

Base UI uses render props instead of asChild, has Floating UI positioning built in, and offers a smaller bundle, but it is still in beta. Radix UI is stable with a larger ecosystem, so choose it when API stability matters more than bundle size.

Why is my Base UI popup not positioning correctly?▼

Popups like Select, Popover, and Tooltip require a Positioner wrapper around the Portal and Popup for Floating UI to work. Rendering a Popup without a Positioner, or skipping the Portal, breaks positioning and viewport collision handling.

Is Base UI production ready and what React version does it need?▼

Base UI is at v1.0.0-beta.4 with stable v1.0 expected in Q4 2025; Dialog, Popover, Tooltip, Select, and Accordion are considered stable while NumberField may change. It requires React 19 or later.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
ollieb89ollieb89

webapp-testing

Automate Playwright-driven end-to-end web app testing with health reports.

Community
Intermediate
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
awardsappawardsapp

building-compound-components

Design unstyled compound React component APIs with context and render props.

Official
Intermediate