Sistema de Design Radix UI

Crie sistemas de design prontos para produção e acessíveis usando os primitivos do Radix UI com controle total de personalização e zero opiniões de estilo.

Guia Detalhado

Leia o guia detalhado antes de executar esta habilidade. Ele contém o procedimento completo e o material de referência. Trate seus requisitos de segurança, pré-requisitos e validação como obrigatórios. Para um trabalho focado, carregue as seções relevantes; para um trabalho de ponta a ponta, leia o guia completamente.

Quando Usar Esta Habilidade

• Criando um sistema de design personalizado do zero
• Construindo bibliotecas de componentes de UI acessíveis
• Implementando componentes interativos complexos (Diálogo, Menu suspenso, Abas, etc.)
• Migrando de bibliotecas de componentes estilizados para primitivos sem estilo
• Configurando sistemas de temas com variáveis CSS ou Tailwind
• Necessidade de controle total sobre o comportamento e o estilo dos componentes
• Construindo aplicações que exigem conformidade com WCAG 2.1 AA/AAA

Não use esta habilidade quando

• Você precisa de componentes pré-estilizados prontos para uso (use shadcn/ui, Mantine, etc.)
• Construindo páginas estáticas simples sem interatividade
• O projeto não usa React 16.8+ (Radix requer hooks)
• Você precisa de componentes para frameworks diferentes do React

Exemplos do Mundo Real

Exemplo 1: Paleta de Comandos (Diálogo Combinado)

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>
  );
}

Exemplo 2: Menu suspenso com ícones

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>
  );
}

Exemplo 3: Formulário com Radix Select + React Hook Form

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="Selecione um país" />
              <Select.Icon />
            </Select.Trigger>
            
            <Select.Portal>
              <Select.Content className="select-content">
                <Select.Viewport>
                  <Select.Item value="us">Estados Unidos</Select.Item>

…