NeobrutalistaReact UI componentes
Componentes React acessíveis no estilo neobrutalista — bordas grossas, sombras marcadas, cor no volume máximo. Cada um vem em versão Radix UI, Base UI e React Aria, se instala com a CLI do shadcn e chega como código que é seu.
- 50+ componentes
- Bordas grossas, sombras marcantes
- shadcn CLI instalar
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- Acessível por padrão
- O código é seu
- MCP suporte a servidores
- Modo escuro e RTL
- Pequenas gravadoras que chamam a atenção
Todos os componentes
Abas
Alterne entre painéis de conteúdo em camadas — páginas de configurações, painéis de controle e visualizações de código — com o estilo neobrutalista de bordas e sombras.
Acordeão
Um conjunto de seções expansíveis dispostas verticalmente para perguntas frequentes, configurações e páginas com muito conteúdo — com aquele estilo neobrutalista de bordas e sombras.
Alerta
Uma nota explicativa embutida para erros de formulário, avisos e confirmações de sucesso — painéis com as cores de status, bordas neobrutalistas e sombras marcantes.
Alternar
Um botão de ligar/desligar com duas posições para os controles de formatação da barra de ferramentas, silenciar e fixar — com aquele visual neobrutalista de bordas e sombras.
Área de rolagem
Um contêiner com rolagem e barras de rolagem personalizadas, compatíveis com todos os navegadores, para painéis de bate-papo, barras laterais e árvores de arquivos — com um botão de rolagem robusto no estilo neobrutalista.
Área de texto
Um campo de texto com várias linhas para comentários, biografias e mensagens de suporte — com aquele estilo neobrutalista de bordas e sombras.
Avatar
Uma imagem de usuário com as iniciais como alternativa para menus de perfil, threads de comentários e listas de equipes — com aquele estilo neobrutalista de bordas grossas.
Barra de menu
Uma barra horizontal com menus suspensos para barras de ferramentas, editores e painéis no estilo de aplicativos — com aquele visual neobrutalista de bordas e sombras.
Barra lateral
Um painel de navegação dobrável para painéis de controle, documentos e ferramentas de administração — com aquele estilo neobrutalista de bordas e sombras.
Botão
Um botão clicável para enviar formulários, barras de ferramentas e confirmações de exclusão — com bordas grossas e uma sombra que se aprofunda quando você clica nele.
Caixa combinada
Um campo de preenchimento automático que filtra as opções conforme você digita — seletores de país, campos de tags, listas suspensas longas — com bordas e sombras no estilo neobrutalista.
Caixa de seleção
Um botão binário para caixas de consentimento, filtros de seleção múltipla e seleção em massa de linhas — com aquele estilo neobrutalista de bordas e sombras.
Calendário
Um seletor de datas em formato de grade mensal para reservas, agendamento e seleção de intervalos — com aquele estilo neobrutalista de bordas e sombras.
Campo
Campos de rótulo, controle, texto de ajuda e erro para painéis de configurações, formulários de finalização de compra e fluxos de cadastro — com o estilo neobrutalista nos formulários.
Carregando
Um indicador de carregamento animado para envios pendentes, consultas e estados de ocupado embutidos — um ícone pronto para usar em qualquer controle neobrutalista.
Carrossel
Uma apresentação de slides com deslocamento para galerias de produtos, depoimentos e seções de destaque — com bordas no estilo neobrutalista e sombras marcantes.
Cartão
Uma caixa com borda para painéis, planos de preços e tabelas de produtos — cabeçalho, conteúdo e rodapé com o efeito de sombra forte no estilo neobrutalista.
Cartão ao passar
Uma pré-visualização flutuante que aparece quando você passa o mouse por cima — vislumbres de perfis, pré-visualizações de links, termos do glossário — com aquele estilo neobrutalista de bordas e sombras.
Comando
Uma paleta de comandos controlada pelo teclado para os menus ⌘K, pesquisa global e ações rápidas — com aquele visual neobrutalista de bordas e sombras.
Controle deslizante
Um campo de entrada arrastável para selecionar um valor ou intervalo — volume, filtros de preço, configurações — com aquele estilo neobrutalista de bordas e sombras.
Diálogo
Uma janela modal para confirmações, formulários rápidos e avisos de ações irreversíveis — sobreposta à página com bordas grossas e uma sombra bem marcada.
Diálogo de alerta
Uma janela modal que interrompe o fluxo em caso de ações destrutivas — excluir, sair, descartar — com aquele estilo neobrutalista de bordas e sombras.
Dica
Dicas de foco e ao passar o mouse para botões com ícones, atalhos de teclado e rótulos truncados — com aquele estilo neobrutalista de borda e sombra.
Direção
Um provedor de contexto que alterna os componentes entre LTR (da esquerda para a direita) e RTL, para que menus, controles deslizantes e abas sejam exibidos corretamente em árabe, hebraico e persa.
Distintivo
Um pequeno selo para status, contagens e tags em cartões, tabelas e itens de navegação — com aquele estilo neobrutalista de bordas e sombras.
Entrada
Um campo de texto de linha única para logins, barras de pesquisa e formulários de finalização de compra — com o estilo neobrutalista de borda grossa e sombra forte.
Entrada OTP
Campos para inserção de código único na autenticação de duas etapas (2FA), verificação de login e telas de PIN — campos que aceitam colagem, com bordas em estilo neobrutalista e sombras marcantes.
Esqueleto
Um bloco de espaço reservado que pisca para cartões, avatares e tabelas enquanto os dados carregam — com aquele estilo neobrutalista de bordas grossas.
Gaveta
Uma aba controlada por gestos que desliza a partir de qualquer borda para menus em dispositivos móveis, filtros e formulários rápidos — com bordas e sombras no estilo neobrutalista.
Grupo de alternância
Grupos de botões com dois estados para barras de ferramentas de editores, seletores de visualização e barras de filtro — com aquele estilo neobrutalista de bordas e sombras.
Grupo de botões
O Fuses reúne botões, barras de ferramentas e complementos de entrada em uma única unidade emoldurada — uma borda grossa, uma sombra forte, um clique compartilhado.
Grupo de entradas
Adicione ícones, botões e dicas de teclado aos campos de entrada de barras de pesquisa, campos de URL e janelas de bate-papo — com bordas e sombras no estilo neobrutalista.
Grupo de rádio
Um conjunto de botões de opção de escolha única para formulários de planos, opções de envio e configurações — com aquele estilo neobrutalista de bordas e sombras.
Interruptor
Um botão de ligar/desligar para ajustes instantâneos — notificações, modo escuro, sinalizadores de recursos — com aquele visual neobrutalista de bordas e sombras.
Item
Uma linha flexível com espaços para mídia, título, descrição e ação, destinada a feeds de notificações, listas de configurações e linhas de arquivos — no estilo neobrutalista.
Menu de contexto
Um menu do botão direito do mouse para linhas de arquivo, telas e grades de dados — ações contextuais com aquele estilo neobrutalista de bordas e sombras.
Menu de navegação
Uma barra horizontal com links e painéis suspensos para cabeçalhos de sites, navegações em documentos e estruturas de aplicativos — com bordas neobrutalistas e sombras marcantes.
Menu suspenso
Um menu acionado por botões para ações em linhas, alternância de contas e opções de visualização — com aquele estilo neobrutalista de bordas e sombras.
Paginação
Links numerados para as páginas, com botões “anterior” e “próximo”, para resultados de busca, tabelas e arquivos — no estilo neobrutalista de bordas e sombras.
Painel lateral
Um painel que desliza a partir da borda da tela para exibir menus de navegação, filtros e formulários de edição — com aquele estilo neobrutalista de bordas e sombras.
Popover
Um painel flutuante vinculado a um gatilho para seletores de data, filtros e formulários embutidos — com aquele estilo neobrutalista de bordas e sombras.
Progresso
Uma barra fina que vai se preenchendo à medida que uma tarefa é concluída — uploads, instalações, integração em várias etapas — com aquele estilo neobrutalista de bordas e sombras.
Proporção
Limita imagens, vídeos incorporados e mapas a uma proporção fixa à medida que são redimensionados — o utilitário de layout que mantém os cartões neobrutalistas alinhados na grade.
Recolhível
Um conjunto de botões e painéis para árvores de arquivos, configurações avançadas e seções “ver mais” — com aquele estilo neobrutalista de bordas e sombras.
Redimensionável
Painéis divididos que podem ser arrastados para editores de código, árvores de arquivos e layouts de painéis — com aquele estilo neobrutalista de bordas e sombras.
Rótulo
Uma legenda para campos de entrada, caixas de seleção, botões de alternância e grupos de botões de opção — os cliques ativam o controle, escrita na fonte neobrutalista do título.
Seleção
Um menu suspenso pra escolher uma opção — campos de país, ordens de classificação, configurações de tema — com bordas grossas no estilo neobrutalista e sombras marcantes.
Seleção nativa
O seletor HTML nativo redesenhado para formulários, filtros e seletores de país — menu suspenso renderizado pelo sistema operacional com bordas e sombras no estilo neobrutalista.
Seletor de data
Um calendário pop-up pra escolher datas únicas, intervalos e aniversários em formulários e filtros — com bordas neobrutalistas e sombras marcantes.
Separador
Uma linha horizontal ou vertical que divide menus, barras de ferramentas e listas — desenhada na mesma cor sólida das bordas dos quadros neobrutalistas.
Sonner
Notificações em forma de torradas empilhadas para confirmações de salvamento, uploads e janelas de desfazer — com aquele estilo neobrutalista de bordas e sombras.
Tabela
Uma tabela HTML semântica para faturas, listas administrativas e tabelas de preços — linhas com bordas, cabeçalhos em negrito e uma sombra bem marcante no estilo neobrutalista.
Tabela de dados
Tabelas que podem ser classificadas, filtradas e paginadas para painéis de administração, painéis de controle e listas de pedidos — com aquele estilo neobrutalista de bordas e sombras.
Tecla
Teclas de teclado com dicas de atalhos em menus, dicas de ferramentas e paletas de comandos — um elemento `kbd` nativo com bordas e sombras no estilo neobrutalista.
Tipografia
Recetas versáteis para títulos, texto do corpo, listas, tabelas e código embutido — com diagramação no estilo neobrutalista robusto.
Trilha de navegação
Mostra onde a página se encaixa na hierarquia do site — caminhos de links para documentos, categorias da loja e painéis — em fonte neobrutalista em negrito.
Vazio
Um espaço reservado para buscas sem resultados, painéis em branco e telas iniciais — ícone, título e ação emoldurados por bordas neobrutalistas.