radix-ui

Provide unstyled, accessible React component primitives for custom UI.

3|1|Updated Feb 2, 2026
One-click install
npx skills add https://github.com/HouseGarofalo/claude-code-base --skill radix-ui-housegarofalo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: radix-ui
Source: https://github.com/HouseGarofalo/claude-code-base/tree/main/.claude/skills/radix-ui
Command: npx skills add https://github.com/HouseGarofalo/claude-code-base --skill radix-ui-housegarofalo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a set of unstyled, accessible React component primitives that allow developers to build custom user interfaces with full control over styling and accessibility.

Core Features & Use Cases

  • Accessible Primitives: Offers foundational components like Dialog, DropdownMenu, Tabs, Accordion, Select, Tooltip, and Checkbox with built-in accessibility features.
  • Styling Flexibility: Components are unstyled, enabling integration with any styling solution (CSS, Tailwind CSS, CSS-in-JS).
  • Use Case: A design system team can use these primitives to create a library of reusable, accessible UI components that can be styled consistently across multiple React applications.

Quick Start

Install the radix-ui dialog primitive using npm.

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 sacrificing styling control?

Accessible React UI components with full styling control are built using unstyled primitives. These provide built-in accessibility features for dialogs, dropdowns, and tabs while allowing integration with any CSS or Tailwind styling solution.

Can I use unstyled React primitives with Tailwind CSS or CSS-in-JS?

Unstyled React primitives work with Tailwind CSS, CSS-in-JS, and standard CSS. Components are delivered without default styles, enabling developers to apply custom styling solutions seamlessly across React applications.

What is the best way to create a custom React design system library?

Creating a custom React design system uses unstyled, accessible component primitives. Teams leverage foundational dialogs, accordions, and selects with built-in accessibility to build reusable UI libraries styled consistently across applications.

Do I need a specific CSS framework to use unstyled accessible React components?

No specific CSS framework is needed to use unstyled accessible React components. They are completely unstyled by design, meaning developers can integrate them with any preferred styling solution like standard CSS or Tailwind.

What accessible UI primitives are available for building React dialogs and dropdowns?

Available accessible UI primitives for React include Dialog, DropdownMenu, Tabs, Accordion, Select, Tooltip, and Checkbox. These foundational components come with built-in accessibility features for custom interface development.

Why should I use unstyled React components instead of pre-styled UI libraries?

Unstyled React components provide full styling control and built-in accessibility without enforcing a visual design. This allows teams to build custom UI libraries with their own styling solutions rather than overriding pre-existing styles.