skills.rest
jackspace
jackspaceCOMMUNITY
Explore all skills by this author →
GitHub

base-ui-react

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

16|7|Updated Nov 20, 2025
Search Tags:#Tailwind#render props#base-ui#Radix migration#accessible components#Floating UI
One-click install
npx skills add https://github.com/jackspace/ClaudeSkillz --skill base-ui-react-jackspace
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: base-ui-react
Source: https://github.com/jackspace/ClaudeSkillz/tree/main/skills/base-ui-react
Command: npx skills add https://github.com/jackspace/ClaudeSkillz --skill base-ui-react-jackspace

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides production-tested guidance for Base UI React components, including migration from Radix and patterns for Floating UI.

Core Features & Use Cases

  • 27+ components with render props, including Dialog, Select, Popover, Tooltip, Accordion
  • Migration guidance from Radix UI
  • Centered around accessibility, keyboard navigation, and ARIA
  • Cloudflare Workers ready patterns, SSR-safe templates

Quick Start

Install Base UI, import a component, and follow render-prop usage patterns to build accessible UIs.

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

Base UI provides migration guidance and patterns to transition Radix components like Dialog, Select, Popover, and Tooltip. The Skill includes automation scripts and render-prop examples that map Radix workflows to Base UI's API, reducing integration friction in Vite + React environments.

Can I use Base UI components with Floating UI for positioning?▼

Yes, Base UI integrates with Floating UI's Positioner API for advanced positioning and collision handling. The Skill demonstrates production-ready patterns for combining Floating UI with Base UI's render-prop system in accessible component implementations.

Do Base UI components work in edge deployments like Cloudflare Workers?▼

Base UI components are zero Node.js dependency by design, making them compatible with edge runtimes like Cloudflare Workers. The Skill includes SSR-safe templates and patterns for serverless and edge-deployment environments.

How do I build accessible Base UI components with keyboard navigation and ARIA?▼

Base UI's 27+ components ship with ARIA attributes and keyboard navigation built in. The Skill teaches render-prop patterns that expose these features explicitly, enabling full control over accessibility compliance across Dialog, Select, Accordion, and other components.

What are render props and why does Base UI use them?▼

Render props let you control a component's output by passing a function that returns JSX. Base UI uses render props to give you explicit control over DOM structure, prop spreading, and styling—essential for accessibility and custom designs in TypeScript React apps.

Is Base UI production-ready for enterprise applications?▼

Base UI is beta-ready with production-tested patterns for enterprise use. The Skill covers functional requirements including TypeScript support, keyboard navigation, ARIA compliance, and integration with Tailwind and Floating UI for scalable, accessible component systems.

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

shadcn-ui

Integrate and configure shadcn/ui components in React projects.

Community
Advanced
bovinphangbovinphang
21

fec-storybook-component-doc

Validate Storybook component documentation with MDX and frontmatter checks.

Community
Intermediate
bejranondabejranonda
27

web-artifacts-builder

Build React applications with TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate
aehrcaehrc
133

radix-ui

Guide building accessible React UIs with Radix Themes and Radix Primitives.

Official
Intermediate