Componentes de React

Um checklist aninhado para escolher o componente certo quando vários parecem "próximos o suficiente". Use isso antes de recorrer a shadcn/ui, MUI, Headless UI, React Native Pap

Um elemento clicável que aciona ações - o componente interativo mais fundamental em qualquer aplicativo.

Um diálogo de sobreposição que aparece sobre o conteúdo da página para capturar a atenção do usuário para confirmações, formulários ou informações importantes.

Um componente container com layout estruturado para exibir conteúdo agrupado, como prévias, resumos ou itens de lista.

Um componente de painel de conteúdo recolhível para mostrar e ocultar seções de conteúdo relacionado, reduzindo a desordem visual enquanto mantém a informação acessível.

Um componente para alternar entre diferentes painéis de conteúdo dentro da mesma visualização, mantendo o conteúdo relacionado organizado sem navegação de página.

Uma notificação breve e auto-dismissível que aparece na borda da tela para informar os usuários sobre o resultado de uma ação sem interromper seu fluxo de trabalho.

Um painel flutuante de ações ou opções que aparece ao clicar em um botão e fecha quando o usuário seleciona um item ou clica fora.

Um pequeno rótulo flutuante que aparece ao passar o mouse ou focar para fornecer informações suplementares sobre um elemento sem sobrecarregar a interface.

Um campo de formulário para capturar a entrada de texto do usuário, suportando rótulos, estados de validação e vários tipos de entrada.

Exibe a imagem de perfil de um usuário com um fallback de iniciais quando nenhuma imagem está disponível, comumente usado em barras de navegação, threads de comentários e listas de usuários.

Um pequeno rótulo usado para exibir indicadores de status, categorias, contagens ou tags ao lado de outro conteúdo.

Uma forma de carregamento de placeholder que imita o layout do conteúdo antes que ele seja carregado, reduzindo o tempo de carregamento percebido e prevenindo a mudança de layout.

Um painel de navegação vertical que fica ao lado do conteúdo principal, fornecendo acesso persistente a rotas e seções de nível superior em um layout de aplicativo.

Uma trilha horizontal de links mostrando a localização atual do usuário na hierarquia de navegação, permitindo um rápido retorno às páginas pai.

Um controle para navegar entre páginas de conteúdo, permitindo que os usuários percorram grandes conjuntos de dados ou coleções de conteúdo em blocos gerenciáveis.

Um campo de texto multilinha para capturar conteúdo mais longo, como comentários, descrições ou mensagens. Compartilha convenções de estilo com o componente Input para consistência visual

Um seletor de dropdown para escolher entre uma lista de opções. Suporta o comportamento nativo do navegador para acessibilidade e compatibilidade com dispositivos móveis, com variantes personalizadas.

Um seletor para valores booleanos, usado individualmente para controles de opção ou em grupos para seleção múltipla. Construído com inputs de checkbox nativos e estilização Tailwind para

Um conjunto de botões de rádio mutuamente exclusivos para selecionar uma opção de um grupo. Usa inputs de rádio nativos com atributos `name` compartilhados para navegação nativa por teclado

Um controle de alternância liga/desliga que representa visualmente um estado booleano, comumente usado para configurações, preferências e flags de recursos.

Um rótulo de texto acessível que se associa a controles de formulário via htmlFor, fornecendo identificação clara e comportamento de clique para foco em entradas, seleções e outros elementos interativos.

Um controle de entrada deslizante para selecionar valores numéricos ao longo de uma trilha, fornecendo uma maneira visual e interativa de escolher um valor dentro de um limite mínimo/máximo definido.

Um controle segmentado onde uma ou mais opções podem ser selecionadas de uma linha de botões, comumente usado para alternadores de visualização, filtros e seletores de opções compactos.

Uma linha divisória horizontal ou vertical simples usada para separar visualmente seções de conteúdo ou grupos de elementos relacionados.

Receita de componente AspectRatio para React - mantenha larguras e alturas consistentes para imagens, vídeos e embeds com shadcn/ui e radix-ui.

Um contêiner rolável com uma barra de rolagem estilizada personalizada que substitui a barra de rolagem nativa do navegador, proporcionando uma aparência consistente entre sistemas operacionais e navegadores.

Receita de componente Popover para React - primitivos radix-ui, padrões shadcn/ui, posicionamento, comportamento de descarte e acessibilidade.

Receita de componente de alerta para React - mensagens de status, variantes, ícones e acessibilidade com primitivos shadcn/ui e radix-ui.

Um componente MDX CodeGroup que mostra um conceito através de abas sincronizadas e que preservam a memória -- ideal para ecossistemas multi-superfície como Solana, Node e Rust.

A single-page roundup of every highlight bullet from the 30 pages in the React Components section, grouped by source page so you can scan all 180 takeaways without opening each article individually.