Does it support React 19?

Yes, this skill provides implementation patterns specifically optimized for React 19 and modern Vite-based project structures.

What is the Positioner pattern in Base UI?

Floating components like Popovers and Tooltips require a Positioner wrapper to handle Floating UI logic for smart alignment and collision detection.

How does Base UI differ from Radix UI?

Base UI uses a render prop pattern instead of Radix's asChild, offering more explicit prop spreading, clearer debugging, and superior TypeScript inference.

Does this work with Tailwind CSS?

Absolutely. Base UI is completely unstyled, and this skill is optimized for Tailwind CSS v4 and modern utility-first workflows.

Is this skill suitable for production use?

Yes. While Base UI is in beta, this skill includes production-tested workarounds for known issues and guidance on API stability for v1.0.

Base UI React Component Toolkit

Name: Base UI React Component Toolkit
Author: jackspace

byjackspace

•

デザインツール

Implements accessible, unstyled React components using the render prop pattern for full styling control and smart positioning.

概要

This skill equips Claude with specialized knowledge for implementing Base UI (@base-ui-components/react), MUI's unstyled component library. It focuses on the render prop pattern and Floating UI-powered positioning, providing a robust, accessible alternative to Radix UI. The skill includes production-tested patterns for complex components like Dialogs, Selects, and Popovers, while offering critical workarounds for known beta issues, ensuring high-quality UI development in modern React 19 and Vite environments.

主な機能

Advanced positioning logic integration using the Base UI Positioner pattern
2 GitHub stars
Comprehensive migration mapping for developers transitioning from Radix UI
Pre-emptive fixes for 10+ documented beta issues and accessibility pitfalls
Standardized render prop implementation for explicit prop spreading and type safety
Optimized implementation patterns for Tailwind CSS v4 and Cloudflare Workers

ユースケース

Implementing WAI-ARIA compliant floating components with smart collision detection
Migrating complex Radix UI codebases to the more explicit Base UI render prop model
Building bespoke design systems with complete styling freedom and zero CSS overrides

概要

主な機能

Advanced positioning logic integration using the Base UI Positioner pattern
2 GitHub stars
Comprehensive migration mapping for developers transitioning from Radix UI
Pre-emptive fixes for 10+ documented beta issues and accessibility pitfalls
Standardized render prop implementation for explicit prop spreading and type safety
Optimized implementation patterns for Tailwind CSS v4 and Cloudflare Workers

ユースケース

Implementing WAI-ARIA compliant floating components with smart collision detection
Migrating complex Radix UI codebases to the more explicit Base UI render prop model
Building bespoke design systems with complete styling freedom and zero CSS overrides