skills.rest
Jaush-M
Jaush-MCOMMUNITY
Explore all skills by this author →
GitHub

base-ui-react

Generate Base UI React components with render props for TypeScript projects.

Updated Apr 24, 2026
Search Tags:#react#render props#floating-ui#base-ui#positioner#radix-migration
One-click install
npx skills add https://github.com/Jaush-M/sys-dev --skill base-ui-react-jaush-m
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: base-ui-react
Source: https://github.com/Jaush-M/sys-dev/tree/main/.agents/skills/base-ui-react
Command: npx skills add https://github.com/Jaush-M/sys-dev --skill base-ui-react-jaush-m

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Provides a production-ready setup for Base UI React components with render props, easing adoption and Radix UI migrations while enabling Floating UI positioning.

Core Features & Use Cases

  • Render prop API across all components for explicit prop spreading
  • Positioner pattern with Floating UI for smart popup placement (Select, Popover, Tooltip)
  • Migration guidance from Radix UI with documented beta workarounds and templates
  • Templates, references, and Cloudflare Workers compatibility for production-ready deployments
  • Full accessibility support with ARIA attributes and keyboard navigation

Quick Start

Install the Base UI React package and start from the included templates to build accessible components quickly.

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 my floating UI components from Radix UI to Base UI React?▼

You can migrate Radix UI components to Base UI React using the included migration guide and templates. It provides documented beta workarounds for dialogs, selects, popovers, and tooltips to ensure a smooth transition while maintaining accessibility and production readiness.

How does the render props API work for Base UI React components?▼

The render props API for Base UI React components enables explicit prop spreading across all elements. This approach gives you direct control over component composition and styling without relying on implicit wrapper elements or restrictive configuration objects.

Can I use Base UI React positioning components with Cloudflare Workers and Vite?▼

Yes, Base UI React components are compatible with Cloudflare Workers and Vite. This Skill provides production-ready templates tailored for modern React 19+ projects using this deployment stack, ensuring smooth integration and deployment.

What is the Positioner pattern for smart popup placement in Base UI?▼

The Positioner pattern in Base UI leverages Floating UI to enable smart popup placement for Select, Popover, and Tooltip components. It automatically calculates optimal positioning for accessible, dynamic floating elements within your React application.

Do I need Tailwind v4 and React 19 to use these Base UI templates?▼

The templates are optimized for modern React 19+ projects using Vite and Tailwind v4. However, the core render-props API and Positioner pattern can be adapted to other setups, though this Skill specifically targets that stack for production-ready compatibility.

Related Skills

Explore More Software Engineering Skills→
leejayhsuleejayhsu

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup for React projects.

Community
Intermediate
porcupine-mdporcupine-md
11

cloudflare-deployment

Automate Cloudflare Pages and Workers deployments through a six-phase lifecycle.

Official
Intermediate
secondskysecondsky
204

base-ui-react

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

Community
Advanced
jackspacejackspace
16

base-ui-react

Migrate Radix components to Base UI React with render-prop APIs.

Community
Advanced