skills.rest
Eng-suso
Eng-susoCOMMUNITY
Explore all skills by this author →
GitHub

radix-ui-design-system

Build accessible React component libraries using Radix UI headless primitives.

Updated Aug 10, 2026
Search Tags:#theming#accessibility#react#design system#tailwind#radix ui#headless components
One-click install
npx skills add https://github.com/Eng-suso/BK-GPT --skill radix-ui-design-system-eng-suso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: radix-ui-design-system
Source: https://github.com/Eng-suso/BK-GPT/tree/main/.claude/skills/radix-ui-design-system
Command: npx skills add https://github.com/Eng-suso/BK-GPT --skill radix-ui-design-system-eng-suso

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-icons, class-variance-authority.

What problem does it solve? Building accessible, customizable UI components from scratch is error-prone and time-consuming, especially when handling keyboard navigation, focus management, and ARIA attributes correctly. This Skill guides you through creating production-grade design systems with Radix UI primitives, so you get accessibility built-in while keeping full styling control. ## Core Features & Use Cases - Headless Component Patterns: Implement Dialog, Dropdown Menu, Tabs, Tooltip, Select, and Popover primitives with compound component architecture and the asChild polymorphic pattern. - Theming Strategies: Apply CSS variables, Tailwind with Class Variance Authority (CVA), or Stitches for scalable, variant-driven styling systems. - Accessibility Compliance: Follow built-in checklists for WCAG 2.1 AA requirements including focus trapping, keyboard navigation, and screen reader support. - Use Case: You need a custom dropdown menu with checkbox items, radio groups, and nested sub-menus for a data table. Use this Skill to compose Radix DropdownMenu primitives with proper keyboard navigation and your own Tailwind styling, without fighting pre-styled component defaults. ## Quick Start Ask the assistant to create an accessible Dialog component using Radix UI primitives styled with 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 design systems.

Does Radix UI work with frameworks other than React?▼

Radix UI primitives require React 16.8 or later because they rely on hooks. The styling output such as CSS variables works anywhere, but the primitives themselves cannot be used with Vue, Angular, or Svelte.

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

Portal content unmounts immediately when closed, cutting off exit animations. Use forceMount on the Portal combined with AnimatePresence and conditional rendering so exit animations complete before unmounting.

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+. Pre-styled libraries like Mantine fit those cases better.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-vite-integration

Configure shadcn/ui in Vite React TypeScript projects with Tailwind CSS.

Official
Intermediate
PMDevSolutionsPMDevSolutions
7

react-accessibility

Implement WCAG 2.2 Level AA accessible patterns in React applications.

Official
Intermediate
compozycompozy
2.7k

better-ui

Applies design engineering principles to polish UI surfaces, animations, and icons.

Official
Intermediate
merileymeriley

mantine-developing

Develop React UIs with Mantine components, Styles API, and @mantine/form.

Community
Intermediate