skills.rest
trystan2k
trystan2kCOMMUNITY
Explore all skills by this author →
𝕏@trystan2kGitHub

base-ui-react

Provide accessible React 19+ components with a render-prop API.

Updated Mar 8, 2026
Search Tags:#react#render-props#portal#floating-ui#base-ui#accessible#positioner
One-click install
npx skills add https://github.com/trystan2k/padelbuddy-web --skill base-ui-react-trystan2k
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: base-ui-react
Source: https://github.com/trystan2k/padelbuddy-web/tree/main/.opencode/skills/base-ui-react
Command: npx skills add https://github.com/trystan2k/padelbuddy-web --skill base-ui-react-trystan2k

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Base UI React provides an accessible, unstyled component library that lets you build UI with full control and predictable behavior across projects.

Core Features & Use Cases

  • 27+ accessible components including Dialog, Select, Popover, Tooltip, Accordion, and NumberField, with a render-prop API for explicit prop spreading and better TypeScript support.
  • Floating components follow the Positioner pattern using Floating UI for reliable positioning and explicit Portals for modals.
  • Migration guidance from Radix UI to Base UI, and beta notes to help teams adopt a stable path toward v1.0.

Quick Start

Install the package and begin composing accessible, render-prop components in your React project.

Frequently Asked Questions about base-ui-react

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

FAQPage Schema
How do I build accessible React components with full styling control?▼

Accessible React components with full styling control use an unstyled library with a render-prop API, enabling explicit prop spreading and predictable behavior across projects without imposing styling constraints.

How do I migrate from Radix UI to an unstyled React component library?▼

Migrating from Radix UI to an unstyled React component library involves following provided migration guidance to transition your components to a render-prop API pattern, ensuring accessible behavior while gaining full styling control.

Does this accessible React component library work with React 19 and Vite?▼

Yes, this accessible React component library targets React 19+ projects using Vite, providing 27+ components including Dialog, Select, Popover, and Tooltip with beta-aware documentation for stable adoption.

What is the Positioner pattern for floating UI components in React?▼

The Positioner pattern for floating UI components uses Floating UI for reliable positioning and explicit Portals for modals, ensuring components like Popover and Tooltip render predictably and maintain accessibility standards.

How do I handle portal rendering for React modals and dialogs?▼

Portal rendering for React modals and dialogs is handled explicitly by enforcing the use of Portals for floating components, ensuring predictable stacking and rendering behavior outside the main DOM tree.

Are there limitations when using beta React component libraries for production?▼

Beta React component libraries for production include beta-aware documentation to guide teams toward a stable v1.0 path, though developers should anticipate potential API changes and incomplete feature coverage before full release.

Related Skills

Explore More Software Engineering Skills→
sbalagan22sbalagan22

react-patterns

Identify React 19 performance bottlenecks using a prioritized pattern checklist.

Community
Advanced
vcode-shvcode-sh
19

base-ui-guide

Document Base UI React component APIs, styling, and accessibility.

Community
Intermediate
imalfectimalfect
1

base-ui-react

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

Community
Advanced
wafflebyteswafflebytes
7

building-compound-components

Wire React UI primitives with contextual state using Radix-style patterns.

Community
Intermediate