skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

radix-ui-design-system

Build accessible React component libraries using Radix UI primitives with custom theming.

1|Updated Aug 17, 2025
Search Tags:#theming#accessibility#react#design system#tailwind#radix ui#headless components
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill radix-ui-design-system-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: radix-ui-design-system
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/radix-ui-design-system
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill radix-ui-design-system-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building accessible, interactive UI components from scratch is error-prone and time-consuming, especially when you need full styling control without fighting pre-styled component libraries. This Skill guides you through creating production-grade design systems with Radix UI's unstyled, WAI-ARIA compliant primitives. ## Core Features & Use Cases - Headless Component Patterns: Implement Dialog, Dropdown Menu, Tabs, Select, Tooltip, and Popover with compound component architecture and full styling control. - Theming Strategies: Apply CSS variables, Tailwind with CVA (class-variance-authority), or Stitches for scalable design system theming. - Accessibility Compliance: Built-in guidance for keyboard navigation, focus management, ARIA attributes, and WCAG 2.1 AA/AAA requirements. - Use Case: You need a custom dropdown menu with checkbox items, radio groups, and nested sub-menus that matches your brand exactly. Use this Skill to compose Radix primitives with your own styles while keeping keyboard navigation and screen reader support intact. ## Quick Start Ask the AI to build an accessible Dialog component with Radix UI primitives styled using Tailwind and CVA variants.

Frequently Asked Questions about radix-ui-design-system

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

FAQPage Schema
How do I build an accessible Dialog component with Radix UI?▼

Compose Dialog.Root, Dialog.Trigger, Dialog.Portal, Dialog.Overlay, and Dialog.Content, always including Dialog.Title and Dialog.Description for screen readers. Radix handles focus trapping, Escape key closing, and focus restoration automatically.

What is the difference between Radix UI and shadcn/ui?▼

Radix UI provides unstyled, headless primitives giving full styling control, while shadcn/ui is a collection of pre-styled copy-paste components built on Radix and Tailwind. Use shadcn for quick prototyping and raw Radix for fully custom designs.

How do I theme Radix UI components with Tailwind CSS?▼

Combine Tailwind utility classes with class-variance-authority (CVA) to define variant and size styles, then merge classes with clsx and tailwind-merge. Alternatively, use CSS variables in Tailwind arbitrary values for theme switching.

Does Radix UI work with frameworks other than React?▼

No, Radix UI primitives require React 16.8 or later because they rely on hooks. For other frameworks you would need alternatives like Headless UI for Vue or native web components.

Why do Radix UI animations not work with Framer Motion?▼

Portal content unmounts immediately when closed, cutting off exit animations. Fix this by using forceMount on the Portal and wrapping the content in AnimatePresence, rendering conditionally based on the open state.

When should I not use Radix UI primitives?▼

Avoid Radix when you need pre-styled components out of the box, when building simple static pages without interactivity, or when the project does not use React 16.8+. In those cases use styled libraries like Mantine or shadcn/ui.

Related Skills

Explore More Software Engineering Skills→
sandalsoftsandalsoft

clean-web-design

Standardize React/Tailwind frontend design with token-based dark-mode-ready UI primitives.

Community
Advanced
oakossoakoss
1

tanstack-form

Build accessible forms with TanStack Form and React Aria Components.

Official
Intermediate
hatch3rhatch3r
26

hatch3r-ui-ux-verify

Validate UI/UX with axe-core, Playwright, and accessibility-tree snapshots.

Official
Advanced
styleframe-devstyleframe-dev
91

research-component

Research UI component variants and patterns across specified library pages.

Official
Intermediate