radix-ui

Provide unstyled, accessible UI primitives for React design systems.

4|Updated Jan 15, 2026

Search Tags:#accessibility #react #design system #ui components #radix ui #headless ui

Ready to run

npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill radix-ui-mgd34msu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: radix-ui
Source: https://github.com/mgd34msu/goodvibes-gemini/tree/main/skills/radix-ui
Command: npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill radix-ui-mgd34msu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation of accessible, unstyled UI components for modern web applications, reducing the complexity of building robust design systems.

Core Features & Use Cases

Accessible Primitives: Provides foundational components like Dialogs, Dropdowns, Tabs, and more, built with accessibility in mind.
Headless UI: Offers unstyled components that can be fully customized to match any design system.
Use Case: When building a new feature that requires a modal dialog or a complex dropdown menu, use this Skill to quickly implement these components with built-in accessibility.

Quick Start

Install the radix-ui dialog component by running npm install @radix-ui/react-dialog.

Frequently Asked Questions about radix-ui

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

FAQPage Schema

How do I build accessible React UI components without enforcing a specific visual style?▼

You can use headless UI primitives to build accessible React UI components without enforcing styles. These unstyled components provide built-in accessibility for dialogs and dropdowns while allowing full visual customization to match your design system.

What are headless UI components and when do I need them for a React design system?▼

Headless UI components are unstyled primitives that handle accessibility and interaction logic without dictating visual appearance. You need them when building a custom React design system that requires full control over styling while maintaining robust accessibility.

Does the radix-ui Skill provide styled components like buttons and accordions out of the box?▼

No, the radix-ui Skill provides unstyled, headless UI primitives rather than pre-styled components. You must apply your own CSS styles to elements like accordions and dialogs using data attributes to match your design system.

How do I style unstyled React UI components if they do not include default CSS?▼

You style unstyled React UI components by targeting specific data attributes exposed by the primitives. This approach allows you to apply custom CSS directly to the headless components, ensuring they integrate seamlessly into your existing design system.

Can I compose a custom React dropdown menu using a different child element?▼

Yes, you can compose a custom React dropdown menu using a different child element. The primitives support an `asChild` prop, allowing you to merge the component's accessibility logic directly onto your own custom React elements.

What is the best way to add an accessible modal dialog to a React application?▼

The best way to add an accessible modal dialog is using unstyled React UI primitives. They provide robust accessibility features out of the box, letting you focus on custom styling while ensuring focus trapping and keyboard navigation function correctly.