radix-ui-design-system

name	radix-ui-design-system
type	reference
description	Provides Radix UI patterns for building accessible design systems with headless components, theming, and compound component architecture. Use when building UI with Radix UI primitives or when the user mentions Radix UI, headless components, or accessible component libraries.
paths	["**/*.tsx","**/*.jsx","**/components.json"]
when_to_use	When building accessible component libraries with Radix UI primitives, headless components, or design system theming
allowed-tools	Read, Glob, Grep, Write, Edit, Bash
user-invocable	true
effort	3

Radix UI Design System

Critical rules (non-obvious)

• Always use asChild on Trigger/Close — prevents nested <button> inside <button> DOM errors
• Always include <Dialog.Title> and <Dialog.Description> — screen readers require them; omitting causes a11y violations
• Never mix controlled + uncontrolled — don't use both defaultValue and value on same component
• Animations need forceMount — without it Portal unmounts instantly, killing Framer Motion exit animations
• Dropdown positioning off? — parent has overflow: hidden or CSS transform; always wrap in <Portal>

Core pattern: Dialog

<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog.Trigger asChild><button>Open</button></Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="overlay" />
    <Dialog.Content className="content">
      <Dialog.Title>Title</Dialog.Title>       {/* required */}
      <Dialog.Description>Desc</Dialog.Description> {/* required */}
      <Dialog.Close asChild><button>Close
    
  
</.>