Does this skill support React 19?

Yes, this skill is optimized for Radix UI v1.4.x, offering full compatibility with React 19 features and React Server Components (RSC).

Why does this skill enforce using Portals for overlays?

Portals render overlay content outside the main React tree (usually at the end of the body), which prevents common bugs related to CSS stacking contexts and parent 'overflow: hidden' constraints.

What is the 'asChild' pattern?

The asChild prop is a polymorphic pattern that allows Radix to merge its functionality and accessibility attributes directly onto your custom components without adding extra DOM nodes.

Can I use my own styling with these components?

Absolutely. Radix UI primitives are unstyled by design, allowing you to apply your own CSS, Tailwind, or CSS-in-JS solutions via the className prop.

Radix UI Primitives for React

Name: Radix UI Primitives for React
Author: agents-inc

byagents-inc

0•

디자인 도구

Builds high-quality, accessible UI components using unstyled Radix primitives and modern React 19 patterns.

This skill empowers Claude to implement professional-grade, accessible user interface components using Radix UI primitives. It provides specialized guidance on compound component structures, polymorphic 'asChild' patterns, and full React 19/RSC compatibility. Designed for developers building custom design systems or complex web applications, it automates the creation of accessible overlays like dialogs, popovers, and tooltips while ensuring strict adherence to focus management, keyboard navigation, and ARIA standards.

주요 기능

01Accessible overlay management via DOM Portals

02State-based CSS animation support via data-state attributes

03Polymorphic UI elements using the asChild and Slot patterns

040 GitHub stars

05React 19 and Server Components (RSC) compatibility

06Compound component architecture (Root, Trigger, Portal, Content)

사용 사례

01Building a custom, accessible design system from the ground up

02Implementing complex modal dialogs and dropdown menus with full keyboard support

03Creating flexible UI components that merge behavioral logic with custom styling solutions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-ui-radix-ui

For use in Claude.ai and ChatGPT