skills.rest
imalfect
imalfectCOMMUNITY
Explore all skills by this author →
𝕏@imaldevGitHub

base-ui-react

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
One-click install
npx skills add https://github.com/imalfect/callwrench-ai --skill base-ui-react-imalfect
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jrmatherlyjrmatherly

spaceui-dev

Deliver a shared React design system with Tailwind v4 tokens for Spacebot web interfaces.

Community
Advanced
pelcherspelchers

using-radix-primitives

Provide ready-to-use Radix primitives for accessible, composable React UI components with keyboard support and ARIA semantics.

Community
Intermediate
mbepsmbeps

migrating-radix-to-base-ui

Migrate Shadcn UI components from Radix UI to Base UI and Tailwind CSS v4.

Community
Advanced
BetaHuhnBetaHuhn
1

bits-ui

Guide construction of headless Bits UI components in Svelte 5 projects.

Community
Intermediate