base-ui-react

Name: base-ui-react
Availability: InStock
Author: iMalFect

Configure Base UI React components with render-prop APIs and Floating UI positioning.

1|Updated Mar 27, 2026

Search Tags:#react #tailwind #render props #floating-ui #base-ui #positioner #radix-migration

Ready to run

npx skills add https://github.com/imalfect/callwrench-ai --skill base-ui-react-imalfect

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: base-ui-react
Source: https://github.com/imalfect/callwrench-ai/tree/main/.agents/skills/base-ui-react
Command: npx skills add https://github.com/imalfect/callwrench-ai --skill base-ui-react-imalfect

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Provides a ready-to-use baseline for integrating Base UI React components (@base-ui-components/react) with a focus on accessibility, render-prop APIs, and Floating UI positioning, enabling teams to accelerate UI kit adoption.

Core Features & Use Cases

Production-ready setup for Base UI with 27+ components (Dialog, Select, Popover, Tooltip, Accordion, NumberField) and migration guidance from Radix UI.
Positioner pattern integration for floating components, explicit Portal usage, and robust keyboard accessibility.
Tailwind v4 compatibility, Cloudflare Workers readiness, and TypeScript-first tooling for scalable UI development.

Quick Start

Install the library and start a sample render-prop based UI with a dialog example to observe Portal and positioning patterns in action.

Frequently Asked Questions about base-ui-react

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

FAQPage Schema

How do I set up Base UI React components for a production project?▼

Base UI React migration from Radix UI involves adopting a render-prop based API and integrating Floating UI for component positioning. This setup guide provides a baseline to transition components like Dialog, Select, and Tooltip while maintaining accessibility and explicit Portal usage.

Does Base UI work with Tailwind v4 and React 19?▼

Base UI works with Tailwind v4 and React 19+ projects, offering compatibility for scalable UI development. The setup is tailored for environments requiring a render-prop based component library and is ready for Cloudflare Workers deployments.

How does the Positioner pattern handle floating UI components like Popover and Tooltip?▼

The Positioner pattern handles floating UI components by leveraging Floating UI to manage robust positioning for Popover and Tooltip. This approach requires explicit Portal usage to ensure proper layering and robust keyboard accessibility within your application.

What are the limitations of using Base UI React components?▼

A key limitation of using Base UI React components is beta awareness, as the library is still maturing. Developers should anticipate potential API changes and ensure their setup explicitly handles Portals and Positioner configurations to avoid edge cases.