skills.rest
aehrc
aehrcOFFICIAL
Explore all skills by this author →
Website𝕏@ehealthresearchGitHub

radix-ui

Guide building accessible React UIs with Radix Themes and Radix Primitives.

133|23|Updated Mar 23, 2020
Search Tags:#ui#accessibility#react#design system#components#radix
One-click install
npx skills add https://github.com/aehrc/pathling --skill radix-ui-aehrc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: radix-ui
Source: https://github.com/aehrc/pathling/tree/main/.claude/skills/radix-ui
Command: npx skills add https://github.com/aehrc/pathling --skill radix-ui-aehrc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides expert guidance for building accessible and customizable user interfaces in React using Radix Themes and Radix Primitives, streamlining UI development.

Core Features & Use Cases

  • Component Development: Create accessible, customisable UI components.
  • Theming Systems: Set up and manage theming for consistent design.
  • Component Integration: Work with pre-styled Radix Themes components or build custom components on top of unstyled Radix Primitives.
  • Use Case: You need to build a complex modal dialog with custom styling and ensure it's fully accessible via keyboard navigation and screen readers. This Skill will guide you through using Radix Primitives to achieve this.

Quick Start

Use the radix-ui skill to get started with setting up Radix Themes in a React application.

Frequently Asked Questions about radix-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React components with custom styling?▼

Build accessible React components with custom styling by using Radix Primitives, which provide unstyled, behavior-focused foundations that you can layer with your own CSS to ensure keyboard navigation and screen reader support.

What is the best way to set up a theming system in a React UI?▼

Set up a React theming system using Radix Themes, which provides pre-styled components and a centralized configuration system to manage design tokens and ensure consistent visual output across your application.

Can I use Radix Themes for pre-styled components or do I need to build from scratch?▼

You can use Radix Themes for pre-styled components out of the box, or alternatively build custom components from scratch using unstyled Radix Primitives if you need full control over the visual implementation.

How do I implement keyboard navigation and screen reader support in a modal dialog?▼

Implement keyboard navigation and screen reader support in a modal dialog by using Radix Primitives, which handle accessibility patterns like focus trapping and ARIA attribute management automatically within your React application.

Are Radix Primitives suitable for creating a complete design system?▼

Radix Primitives are suitable for creating a design system because they offer unstyled, accessible foundation components that you can systematically theme and compose into a standardized React UI library.

Related Skills

Explore More Design & Creative Skills→
SyedaashnaghazanfarSyedaashnaghazanfar
2

shadcn

Provide accessible UI components for React apps built with Tailwind CSS.

Community
Advanced
miethemiethe

design-system-patterns

Establish scalable design system foundations with semantic tokens and React theming.

Community
Advanced
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
tmarsbrtmarsbr

radix-ui-design-system

Build accessible React UI libraries with Radix primitives and theming strategies.

Community
Advanced