Overview

Want to quickly master Radix UI through working examples? This by-example guide teaches 95% of Radix UI through 80 annotated code examples organized by complexity level.

What Is By-Example Learning?

By-example learning is an example-first approach where you learn through annotated, runnable code rather than narrative explanations. Each example is self-contained, immediately usable in a React project, and heavily commented to show:

• What each line does - Inline comments explain the purpose and mechanism
• Expected behaviors - Using // => notation to show rendered output and state changes
• Component relationships - How Radix primitives compose together
• Key takeaways - 1-2 sentence summaries of core concepts

This approach is ideal for experienced React developers who understand component composition, hooks, and JSX, and want to quickly understand Radix UI's primitives, accessibility patterns, and composition model through working code.

Unlike narrative tutorials that build understanding through explanation and storytelling, by-example learning lets you see the code first, render it second, and understand it through direct interaction. You learn by doing, not by reading about doing.

Learning Path

%% Color Palette: Blue #0173B2, Orange #DE8F05, Teal #029E73, Purple #CC78BC, Brown #CA9161
graph TD
    A["Beginner<br/>Examples 1-30<br/>Core Primitives"] --> B["Intermediate<br/>Examples 31-55<br/>Production Patterns"]
    B --> C["Advanced<br/>Examples 56-80<br/>Expert Mastery"]
 
    style A fill:#0173B2,stroke:#000000,stroke-width:2px,color:#fff
    style B fill:#DE8F05,stroke:#000000,stroke-width:2px,color:#fff
    style C fill:#029E73,stroke:#000000,stroke-width:2px,color:#fff

Progress from core primitives through production patterns to expert mastery. Each level builds on the previous, increasing in sophistication and introducing more advanced composition and accessibility techniques.

Prerequisites

Before starting this guide, you should be comfortable with:

• React fundamentals - Components, props, state, hooks, JSX
• TypeScript basics - Interfaces, generics, type narrowing
• CSS fundamentals - Selectors, specificity, CSS custom properties
• npm/yarn - Package installation, dependency management

You do not need prior experience with Radix UI, headless UI libraries, or WAI-ARIA specifications. The examples teach these concepts incrementally.

Coverage Philosophy

This by-example guide provides 95% coverage of Radix UI through practical, annotated examples. The 95% figure represents the depth and breadth of concepts covered, not a time estimate -- focus is on outcomes and understanding, not duration.

What's Covered

• Core primitives - Dialog, Popover, Tooltip, DropdownMenu, Accordion, Tabs
• Form components - Switch, Checkbox, RadioGroup, Slider, Select, Toggle, ToggleGroup
• Layout primitives - Separator, ScrollArea, AspectRatio, Collapsible, VisuallyHidden
• Overlay components - Portal, AlertDialog, ContextMenu, HoverCard, Toast
• Navigation - NavigationMenu, Toolbar, Menubar
• Composition patterns - asChild, compound components, custom triggers, polymorphic rendering
• Styling integration - data-state attributes, CSS animations, Tailwind CSS patterns
• Accessibility - Keyboard navigation, focus management, screen reader support, ARIA roles
• Production patterns - Form builders, design system integration, testing, SSR, performance
• Advanced techniques - Virtualized lists, complex modal flows, custom primitive building

What's NOT Covered

This guide focuses on learning-oriented examples, not problem-solving recipes or production deployment. For additional topics:

• Specific CSS-in-JS libraries - Emotion, Stitches, or styled-components integration details (beyond general patterns)
• Radix Themes - The pre-styled component library built on Radix Primitives (this guide covers primitives only)
• Server Components - React Server Component patterns (Radix components are client-side by nature)

The 95% coverage goal maintains humility -- no tutorial can cover everything. This guide teaches the core concepts that unlock the remaining 5% through your own exploration and project work.

How to Use This Guide

1. Sequential or selective - Read examples in order for progressive learning, or jump to specific components when you need a particular primitive
2. Render everything - Paste examples into a React project to see results yourself. Experimentation solidifies understanding.
3. Modify and explore - Change props, add styling, break components intentionally. Learn through experimentation.
4. Use as reference - Bookmark examples for quick lookups when you forget a component's API or composition pattern
5. Complement with narrative tutorials - By-example learning is code-first; pair with Radix UI documentation for deeper API reference

Best workflow: Open your editor in one window, this guide in another, and a browser with your dev server in a third. Render each example as you read it. When you encounter something unfamiliar, render the example, modify it, see what changes.

Relationship to Other Tutorials

Understanding where by-example fits in the tutorial ecosystem helps you choose the right learning path:

By-example is your fastest path if you already know React and want to learn Radix UI's primitives through working code. Choose concept-based tutorials if you need deeper understanding of accessibility specifications or design system architecture.

Project Setup

All examples assume a React project with Radix UI packages installed. Use this setup:

npx create-next-app@latest my-radix-app --typescript
cd my-radix-app

Install Radix packages as needed per example:

npm install @radix-ui/react-dialog
npm install @radix-ui/react-popover
npm install @radix-ui/react-tooltip
# ... install per component as introduced

Each example specifies which @radix-ui/react-* package it uses, so you can install incrementally as you progress through the guide.

Examples by Level

Beginner (Examples 1–30)

• Example 1: Installing and Importing Your First Radix Component
• Example 2: Understanding the asChild Pattern
• Example 3: Controlled vs Uncontrolled State
• Example 4: Data-State Attributes for CSS Styling
• Example 5: VisuallyHidden for Screen Reader Content
• Example 6: Popover with Arrow and Positioning
• Example 7: Tooltip with Delayed Appearance
• Example 8: DropdownMenu with Keyboard Navigation
• Example 9: AlertDialog for Destructive Confirmations
• Example 10: HoverCard for Preview Content
• Example 11: Accordion for Expandable Sections
• Example 12: Tabs for Content Switching
• Example 13: Switch Toggle
• Example 14: Checkbox with Indeterminate State
• Example 15: RadioGroup for Exclusive Selection
• Example 16: Slider for Range Selection
• Example 17: Toggle Button
• Example 18: Label Component
• Example 19: Separator for Visual Division
• Example 20: AspectRatio for Responsive Media
• Example 21: ScrollArea for Custom Scrollbars
• Example 22: Collapsible for Show/Hide Sections
• Example 23: Composing Multiple Radix Components
• Example 24: Popover Inside a Dialog
• Example 25: Tooltip on a Disabled Button
• Example 26: Avatar with Fallback Chain
• Example 27: Select Menu for Option Selection
• Example 28: ToggleGroup for Exclusive Button Set
• Example 29: Form Integration with Native HTML Forms
• Example 30: Prop Forwarding and Event Composition

Intermediate (Examples 31–55)

• Example 31: Understanding Portal Rendering
• Example 32: Custom Portal Container
• Example 33: Preventing Overlay Scroll
• Example 34: Overlay Stacking Order
• Example 35: CSS Keyframe Animations with data-state
• Example 36: CSS Transitions with data-state
• Example 37: Accordion Content Height Animation
• Example 38: Radix with Tailwind CSS data-state Selectors
• Example 39: Animation with forceMount for Exit Transitions
• Example 40: Animating Select Content
• Example 41: React Hook Form Integration
• Example 42: Form Validation Error Display
• Example 43: Slider Range (Two Thumbs)
• Example 44: Context Menu (Right-Click)
• Example 45: NavigationMenu for Site Navigation
• Example 46: Custom Focus Management in Dialog
• Example 47: Toolbar with Roving Tabindex
• Example 48: Menubar for Application Menus
• Example 49: Focus Trap Behavior in Nested Components
• Example 50: Keyboard Shortcuts in Menu Items
• Example 51: Toast Notification System
• Example 52: Dialog Form with Multi-Step Wizard
• Example 53: Dropdown with Checkbox and Radio Items
• Example 54: Popover-Based Color Picker Pattern
• Example 55: Alert Dialog with Async Action

Advanced (Examples 56–80)

• Example 56: Wrapping Radix Primitives in Design System Components
• Example 57: Polymorphic Button with asChild
• Example 58: Compound Component Pattern for Custom Widgets
• Example 59: Accessible Combobox with Popover and Command Pattern
• Example 60: Virtualized List Inside ScrollArea
• Example 61: Responsive Dialog-to-Drawer Pattern
• Example 62: Custom Trigger with Forwarded Ref
• Example 63: Unit Testing Dialog Open/Close
• Example 64: Testing DropdownMenu Keyboard Navigation
• Example 65: Testing Toast Notifications
• Example 66: Testing Controlled Components
• Example 67: Snapshot Testing Radix Rendered Output
• Example 68: Server-Side Rendering Considerations
• Example 69: Lazy Loading Radix Components
• Example 70: Preventing Unnecessary Re-renders
• Example 71: Compound Component Performance with Context
• Example 72: Radix with React.startTransition
• Example 73: Theme Context with Radix Components
• Example 74: CSS Variables for Radix Theming
• Example 75: Building a Reusable Form Field Component
• Example 76: Composing Radix with React Hook Form and Zod
• Example 77: Design Token System with Radix Primitives
• Example 78: Command Palette with Search and Keyboard Navigation
• Example 79: Multi-Modal Flow with Shared State
• Example 80: Accessible Drag and Drop Reorder with Radix