firefrost-gaming/antigravity-skills-reference

Files

sickn33 955d35b8c6 fix(codeql): Rename invalid TSX template asset

Keep the Radix component boilerplate as a template asset, but rename it out of the TSX parser path so CodeQL does not treat placeholder syntax as executable source. Update the example README link to the new template filename.

2026-03-18 18:30:51 +01:00

1.5 KiB

Raw Blame History

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:

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

Learn More

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

1.5 KiB Raw Blame History