菜单
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/BEKO2210/Firstbrain --skill radix-ui-design-system命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Arquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.
Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
Ingeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
基于 SOC 职业分类
正在显示 SKILL.md
| name | radix-ui-design-system |
| description | Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries. |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | software-development |
| category | frontend |
| risk | safe |
| source | self |
| tags | ["skill","software-development","frontend","radix","design","system"] |
Build production-ready, accessible design systems using Radix UI primitives with full customization control and zero style opinions.
Radix UI provides unstyled, accessible components (primitives) that you can customize to match any design system. This skill guides you through building scalable component libraries with Radix UI, focusing on accessibility-first design, theming architecture, and composable patterns.
Key Strengths:
Every Radix primitive is built with accessibility as the foundation:
Rule: Never override accessibility features. Enhance, don't replace.
Radix provides behavior, you provide appearance:
// ❌ Don't fight pre-styled components
< className= />
Build complex components from simple primitives:
// Primitive components compose naturally
<Tabs.Root>
<Tabs.List>
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="tab1">Content 1</Tabs.Content>
<Tabs.Content value="tab2">Content 2</Tabs.Content>
</Tabs.Root>
# Install individual primitives (recommended)
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu
# Or install multiple at once
npm install @radix-ui/react-{dialog,dropdown-menu,tabs,tooltip}
# For styling (optional but common)
npm install clsx tailwind-merge class-variance-authority
Every Radix component follows this pattern:
import * as Dialog from '@radix-ui/react-dialog';
export function MyDialog() {
return (
<Dialog.Root>
{/* Trigger the dialog */}
<Dialog.Trigger asChild>
<button className="trigger-styles">Open</button>
</Dialog.Trigger>
{/* Portal renders outside DOM hierarchy */}
<Dialog.Portal>
{/* Overlay (backdrop) */}
<Dialog.Overlay className="overlay-styles" />
{/* Content (modal) */}
<Dialog.Content className="content-styles">
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>Description</Dialog.Description>
{/* Your content here */}
<Dialog.Close asChild>
<button>Close</button>
</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
}
Best for: Maximum portability, SSR-friendly
/* globals.css */
:root {
--color-primary: 220 90% 56%;
--color-surface: 0 0% 100%;
--radius-base: 0.5rem;
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
[data-theme="dark"] {
--color-primary: 220 90% 66%;
--color-surface: 222 47% 11%;
}
// Component.tsx
<Dialog.Content
className="
bg-[hsl(var(--color-surface))]
rounded-[var(--radius-base)]
shadow-[var(--shadow-lg)]
"
/>
Best for: Tailwind projects, variant-heavy components
// button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
// Base styles
"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent",
ghost: "hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
interface ButtonProps extends VariantProps<typeof buttonVariants> {
children: React.ReactNode;
}
export function Button({ variant, size, children }: ButtonProps) {
return (
<button className={cn(buttonVariants({ variant, size }))}>
{children}
</button>
);
}
Best for: Runtime theming, scoped styles
import { styled } from '@stitches/react';
import * as Dialog from '@radix-ui/react-dialog';
const StyledContent = styled(Dialog.Content, {
backgroundColor: '$surface',
borderRadius: '$md',
padding: '$6',
variants: {
size: {
small: { width: '300px' },
medium: { width: '500px' },
large: { width: '700px' },
},
},
defaultVariants: {
size: 'medium',
},
});
Use case: Share state between primitive parts
// Select.tsx
import * as Select from '@radix-ui/react-select';
import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
export function CustomSelect({ items, placeholder, onValueChange }) {
return (
<Select.Root onValueChange={onValueChange}>
<Select.Trigger className="select-trigger">
<Select.Value placeholder={placeholder} />
<Select.Icon>
<ChevronDownIcon />
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content className="select-content">
<Select.Viewport>
{items.map((item) => (
<Select.Item
key={item.value}
value={item.value}
className="select-item"
>
<Select.ItemText>{item.label}</Select.ItemText>
<Select.ItemIndicator>
<CheckIcon />
</Select.ItemIndicator>
</Select.Item>
))}
</Select.Viewport>
</Select.Content>
</Select.Portal>
</Select.Root>
);
}
asChildUse case: Render as different elements without losing behavior
// ✅ Render as Next.js Link but keep Radix behavior
<Dialog.Trigger asChild>
<Link href="/settings">Open Settings</Link>
</Dialog.Trigger>
// ✅ Render as custom component
<DropdownMenu.Item asChild>
<YourCustomButton icon={<Icon />}>Action</YourCustomButton>
</DropdownMenu.Item>
Why asChild matters: Prevents nested button/link issues in accessibility tree.
// Uncontrolled (Radix manages state)
<Tabs.Root defaultValue="tab1">
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
</Tabs.Root>
// Controlled (You manage state)
const [activeTab, setActiveTab] = useState('tab1');
<Tabs.Root value={activeTab} onValueChange={setActiveTab}>
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
</Tabs.Root>
Rule: Use controlled when you need to sync with external state (URL, Redux, etc.).
import * as Dialog from '@radix-ui/react-dialog';
import { motion, AnimatePresence } from 'framer-motion';
export function AnimatedDialog({ open, onOpenChange }) {
return (
<Dialog.Root open={open} onOpenChange={onOpenChange}>
<Dialog.Portal forceMount>
<AnimatePresence>
{open && (
<>
<Dialog.Overlay asChild>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="dialog-overlay"
/>
</Dialog.Overlay>
<Dialog.Content asChild>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
className="dialog-content"
>
{/* Content */}
</motion.div>
</Dialog.Content>
</>
)}
</AnimatePresence>
</Dialog.Portal>
</Dialog.Root>
);
}
<Dialog.Root> {/* State container */}
<Dialog.Trigger /> {/* Opens dialog */}
<Dialog.Portal> {/* Renders in portal */}
<Dialog.Overlay /> {/* Backdrop */}
<Dialog.Content> {/* Modal content */}
<Dialog.Title /> {/* Required for a11y */}
<Dialog.Description /> {/* Required for a11y */}
<Dialog.Close /> {/* Closes dialog */}
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<DropdownMenu.Root>
<DropdownMenu.Trigger />
<DropdownMenu.Portal>
<DropdownMenu.Content>
<DropdownMenu.Item />
<DropdownMenu.Separator />
<DropdownMenu.CheckboxItem />
<DropdownMenu.RadioGroup>
<DropdownMenu.RadioItem />
</DropdownMenu.RadioGroup>
<DropdownMenu.Sub> {/* Nested menus */}
<DropdownMenu.SubTrigger />
<DropdownMenu.SubContent />
</DropdownMenu.Sub>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
<Tabs.Root defaultValue="tab1">
<Tabs.List>
<Tabs.Trigger value="tab1" />
<Tabs.Trigger value="tab2" />
</Tabs.List>
<Tabs.Content value="tab1" />
<Tabs.Content value="tab2" />
</Tabs.Root>
<Tooltip.Provider delayDuration={200}>
<Tooltip.Root>
<Tooltip.Trigger />
<Tooltip.Portal>
<Tooltip.Content side="top" align="center">
Tooltip text
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
<Popover.Root>
<Popover.Trigger />
<Popover.Portal>
<Popover.Content side="bottom" align="start">
Content
<Popover.Arrow />
<Popover.Close />
</Popover.Content>
</Popover.Portal>
</Popover.Root>
aria-invalid and aria-describedbyaria-busy during async operationsDialog.Title is present (required for screen readers)Dialog.Description provides contextAlways use asChild to avoid wrapper divs
<Dialog.Trigger asChild>
<button>Open</button>
</Dialog.Trigger>
Provide semantic HTML
<Dialog.Content asChild>
<article role="dialog" aria-labelledby="title">
{/* content */}
</article>
</Dialog.Content>
Use CSS variables for theming
.dialog-content {
background: hsl(var(--surface));
color: hsl(var(--on-surface));
}
Compose primitives for complex components
function CommandPalette() {
return (
<Dialog.Root>
<Dialog.Content>
<Combobox /> {/* Radix Combobox inside Dialog */}
</Dialog.Content>
</Dialog.Root>
);
}
Don't skip accessibility parts
// ❌ Missing Title and Description
<Dialog.Content>
<div>Content</div>
</Dialog.Content>
Don't fight the primitives
// ❌ Overriding internal behavior
<Dialog.Content onClick={(e) => e.stopPropagation()}>
Don't mix controlled and uncontrolled
// ❌ Inconsistent state management
<Tabs.Root defaultValue="tab1" value={activeTab}>
Don't ignore keyboard navigation
// ❌ Disabling keyboard behavior
<DropdownMenu.Item onKeyDown={(e) => e.preventDefault()}>
import * as Dialog from '@radix-ui/react-dialog';
import { Command } from 'cmdk';
export function CommandPalette() {
const [open, setOpen] = useState(false);
useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((open) => !open);
}
};
document.addEventListener('keydown', down);
return () => document.removeEventListener('keydown', down);
}, []);
return (
<Dialog.Root open={open} onOpenChange={setOpen}>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black/50" />
<Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<Command>
<Command.Input placeholder="Type a command..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>Calendar</Command.Item>
<Command.Item>Search Emoji</Command.Item>
</Command.Group>
</Command.List>
</Command>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
}
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
export function ActionsMenu() {
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<button className="icon-button" aria-label="Actions">
<DotsHorizontalIcon />
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content className="dropdown-content" align="end">
<DropdownMenu.Item className="dropdown-item">
Edit
</DropdownMenu.Item>
<DropdownMenu.Item className="dropdown-item">
Duplicate
</DropdownMenu.Item>
<DropdownMenu.Separator className="dropdown-separator" />
<DropdownMenu.Item className="dropdown-item text-red-500">
Delete
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
);
}
import * as Select from '@radix-ui/react-select';
import { useForm, Controller } from 'react-hook-form';
interface FormData {
country: string;
}
export function CountryForm() {
const { control, handleSubmit } = useForm<FormData>();
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<Controller
name="country"
control={control}
render={({ field }) => (
<Select.Root onValueChange={field.onChange} value={field.value}>
<Select.Trigger className="select-trigger">
<Select.Value placeholder="Select a country" />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<Select.Content className="select-content">
<Select.Viewport>
<Select.Item value="us">United States</Select.Item>
<Select.Item value="ca">Canada</Select.Item>
<Select.Item value="uk">United Kingdom</Select.Item>
</Select.Viewport>
</Select.Content>
</Select.Portal>
</Select.Root>
)}
/>
<button type="submit">Submit</button>
</form>
);
}
Cause: onEscapeKeyDown event prevented or open state not synced
Solution:
<Dialog.Root open={open} onOpenChange={setOpen}>
{/* Don't prevent default on escape */}
</Dialog.Root>
Cause: Parent container has overflow: hidden or transform
Solution:
// Use Portal to render outside overflow container
<DropdownMenu.Portal>
<DropdownMenu.Content />
</DropdownMenu.Portal>
Cause: Portal content unmounts immediately
Solution:
// Use forceMount + AnimatePresence
<Dialog.Portal forceMount>
<AnimatePresence>
{open && <Dialog.Content />}
</AnimatePresence>
</Dialog.Portal>
asChildCause: Type inference issues with polymorphic components
Solution:
// Explicitly type your component
<Dialog.Trigger asChild>
<button type="button">Open</button>
</Dialog.Trigger>
// Lazy load heavy primitives
const Dialog = lazy(() => import('@radix-ui/react-dialog'));
const DropdownMenu = lazy(() => import('@radix-ui/react-dropdown-menu'));
// Create portal container once
<Tooltip.Provider>
{/* All tooltips share portal container */}
<Tooltip.Root>...</Tooltip.Root>
<Tooltip.Root>...</Tooltip.Root>
</Tooltip.Provider>
// Memoize expensive render functions
const SelectItems = memo(({ items }) => (
items.map((item) => <Select.Item key={item.value} value={item.value} />)
));
shadcn/ui is a collection of copy-paste components built with Radix + Tailwind.
npx shadcn-ui@latest init
npx shadcn-ui@latest add dialog
When to use shadcn vs raw Radix:
import { Theme, Button, Dialog } from '@radix-ui/themes';
function App() {
return (
<Theme accentColor="crimson" grayColor="sand">
<Button>Click me</Button>
</Theme>
);
}
@tailwind-design-system - Tailwind + Radix integration patterns@react-patterns - React composition patterns@frontend-design - Overall frontend architecture@accessibility-compliance - WCAG compliance testingnpm install @radix-ui/react-{primitive-name}
<Primitive.Root>
<Primitive.Trigger />
<Primitive.Portal>
<Primitive.Content />
</Primitive.Portal>
</Primitive.Root>
asChild - Render as child elementdefaultValue - Uncontrolled defaultvalue / onValueChange - Controlled stateopen / onOpenChange - Open stateside / align - PositioningRemember: Radix gives you behavior, you give it beauty. Accessibility is built-in, customization is unlimited.
templates/component-template.tsx.templateexamples/dialog-example.tsxexamples/dropdown-example.tsx