NeobrutalistaReact UI componentes
Componentes de UI React open source com visual neobrutalista — bordas grossas, sombras marcadas e cores fortes. Instale com a CLI do shadcn, ou pelo seu agente de IA com o nosso servidor MCP. Funciona com Radix UI, Base UI e React Aria. O código fica no seu repositório e continua seu.
Shell command: npx shadcn add neobrutalism.com/r/base/button.json- 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.
Amado por devs, designers
e criadores
Encontrei o seu kit de UI e peguei na hora. Impressionante ver que é novo, ativo e melhorando sem parar. Trabalho incrível! 🤘
Ziv Reich, Desenvolvedor de software Só queria dizer que você mandou muito bem no neobrutalism.com. Amei de verdade. Sou péssimo em design, então isso me salvou. Usei no meu site pessoal.
Paul Bratslavsky, Criador do Coding With Paul Finalmente refiz o meu site pessoal com a Neobrutalism.com — biblioteca divertida e fácil de começar!
Cameron Blackwood, Criador de conteúdo A Neobrutalism.com é uma das minhas bibliotecas de componentes UI retrô favoritas — componentes que realmente shipam.
Zhengyang Hou, Indie hacker uma das minhas bibliotecas de ui favoritas para a web. mandou muito bem — espero que vá longe.
Taseen Tanvir, Fundador e designer Acabei de testar o Neobrutalism.com Pro — um kit de UI que não é a cara de todos os outros. Os blocos neobrutalistas 🔥 deixaram prototipar layouts estranhos bem mais rápido.
Nitesh Padghan, Ghostwriter Design de landing page lindo, com equilíbrio e fluxo perfeitos. A paleta de cores combinada com as animações cria uma experiência de usuário excepcional.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Fiquei muito impressionado com o design que eles entregaram. O produto final bateu exatamente com o que eu tinha imaginado.
Desmond, Cofundador @ VectorlabsVentures Como dono de agência, eu costumava gastar semanas refinando layouts de landing para clientes. Com o Neobrutalism.com, eu plugo um template, ajusto o texto e já estou pronto para publicar.
Duke Opoku Amankwah, Fundador @ Midas Os templates não são só visualmente incríveis: também são muito bem estruturados. Economizaram semanas de desenvolvimento.
Abiola Braimah, Desenvolvedor @ Studio IX Qualidade excepcional e atenção aos detalhes. O design responsivo funciona perfeitamente em todos os dispositivos.
Acromond X., Cofundador @ VectorlabsVentures Integrar esses templates no nosso fluxo reduziu bastante nosso ciclo de desenvolvimento. Excelente trabalho.
Raquib S., Desenvolvedor backend Esses templates viraram nosso recurso principal. O código é limpo, bem documentado e fácil de personalizar.
Hallic M., Desenvolvedor @ AtlasLabs Os templates do Neobrutalism.com acertam o equilíbrio perfeito entre estética e funcionalidade. Um verdadeiro divisor de águas para nossos projetos.
Ibrahim S., Frontend Lead @ ScaleUp Suporte excepcional e templates de qualidade premium. O ROI desses templates é fenomenal.
Kevin K., CEO @ WebCraft Os templates do Neobrutalism.com transformaram completamente como encaramos novos projetos de clientes. A qualidade do código é excepcional e os designs são de primeiro nível.
Danny G., Fundador da DevStack Já usei muitas bibliotecas de templates, mas o Neobrutalism.com se destaca pela atenção à otimização de performance e a uma arquitetura de código limpa.
Ian D., CTO na Wavelength As animações e microinterações desses templates são absolutamente impressionantes. Melhor investimento para nossa equipe de design.
Ben S., Lead Designer na PixelPerfect Como fundador não técnico, os templates do Neobrutalism.com nos ajudaram a lançar o MVP em tempo recorde sem abrir mão da qualidade do design. Nossos investidores ficaram impressionados.
Matthew I., Fundador de startup Gosto de quão modulares e bem documentados esses componentes são. Conseguimos misturar peças de templates diferentes sem atrito.
Garrett P., Frontend Lead na TechFusion O ROI dos templates do Neobrutalism.com é incrível. Reduzimos drasticamente o tempo de desenvolvimento e entregamos sites de mais qualidade aos clientes.
Xavier C., Dono de agência
Componente
galeria FAQ
Essa grade de primitivas gratuitas — back-ends em cada página de documentação, CLI instalação e como a galeria se relaciona com /docs /components.