radix-ui-design-system

✓Verified·Scanned 2/18/2026

This skill provides guidance and examples for building accessible Radix UI design systems, including code snippets and npm install/npx setup commands. No security-relevant behaviors detected.

by sickn33·v58a9ed7·36.0 KB·77 installs
Scanned from main at 58a9ed7 · Transparency log ↗
$ vett add sickn33/antigravity-awesome-skills/radix-ui-design-system

Radix UI Design System - Skill Examples

This folder contains practical examples demonstrating how to use Radix UI primitives to build accessible, customizable components.

Examples

dialog-example.tsx

Demonstrates Dialog (Modal) component patterns:

  • BasicDialog: Standard modal with form
  • ControlledDialog: Externally controlled modal state

Key Concepts:

  • Portal rendering outside DOM hierarchy
  • Overlay (backdrop) handling
  • Accessibility requirements (Title, Description)
  • Custom styling with CSS

dropdown-example.tsx

Complete dropdown menu implementation:

  • CompleteDropdown: Full-featured menu with all Radix primitives
    • Regular items
    • Separators and labels
    • Checkbox items
    • Radio groups
    • Sub-menus
  • ActionsMenu: Simple actions menu for data tables/cards

Key Concepts:

  • Compound component architecture
  • Keyboard navigation
  • Item indicators (checkboxes, radio buttons)
  • Nested sub-menus

Usage

import { BasicDialog } from './examples/dialog-example';
import { CompleteDropdown } from './examples/dropdown-example';

function App() {
  return (
    <>
      <BasicDialog />
      <CompleteDropdown />
    </>
  );
}

Styling

These examples use CSS classes. You can:

  1. Copy the CSS from each file
  2. Replace with Tailwind classes
  3. Use CSS-in-JS (Stitches, Emotion, etc.)

Learn More

  • Main SKILL.md - Complete guide
  • Component Template - Boilerplate
  • Radix UI Docs