64 lines
1.5 KiB
Markdown
64 lines
1.5 KiB
Markdown
# 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
|
|
|
|
```tsx
|
|
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](../SKILL.md) - Complete guide
|
|
- [Component Template](../templates/component-template.tsx) - Boilerplate
|
|
- [Radix UI Docs](https://www.radix-ui.com/primitives)
|