Radix Ui
Generates Radix UI component code snippets and configurations based on natural language descriptions, streamlining web development.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add radix-ui npx -- -y @trustedskills/radix-ui
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"radix-ui": {
"command": "npx",
"args": [
"-y",
"@trustedskills/radix-ui"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill provides code snippets and configurations for Radix UI Primitives, a library of low-level, unstyled React components. It enables AI agents to generate basic implementations of common UI elements like Dialogs and Dropdown Menus, complete with accessibility features, keyboard navigation, and focus management. The generated code is intended as a starting point for building custom UI components or design systems.
When to use it
- You're building a React-based application and want to quickly prototype UI elements.
- You need accessible and keyboard-navigable components but prefer to style them yourself.
- You are creating a design system and require foundational, unstyled components.
- You're familiar with Radix UI Primitives and want assistance generating boilerplate code.
Key capabilities
- Generates code snippets for Radix UI Dialog components.
- Generates code snippets for Radix UI Dropdown Menu components.
- Includes accessibility features (e.g.,
aria-label). - Provides examples of using icons from
@radix-ui/react-icons.
Example prompts
- "Generate a basic Radix UI Dialog component."
- "Show me an example of a Radix UI Dropdown Menu with items and a checkbox option."
- "Create a Radix UI dialog with a title, description, and input fields for editing a profile."
Tips & gotchas
- This skill provides code snippets; you'll need to integrate them into your existing React project.
- The generated code is unstyled – you will need to apply your own CSS or styling solution.
- Familiarity with Radix UI Primitives and React is recommended for effective use of this skill.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.