NeobrutalistaReact UI componenti
Componenti UI React open source con un look neobrutalista — bordi spessi, ombre nette e colori accesi. Installali con la CLI di shadcn, oppure con il tuo agente AI tramite il nostro server MCP. Funzionano con Radix UI, Base UI e React Aria. Il codice arriva nel tuo repo e resta tuo.
Shell command: npx shadcn add neobrutalism.com/r/base/button.json- 50+ componenti
- Bordi spessi, ombre marcate
- shadcn CLI installa
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- Accessibile per impostazione predefinita
- Il codice è tuo
- MCP assistenza tecnica per i server
- Modalità scura e RTL
- Piccole etichette che non passano inosservate
Tutti i componenti
Accordion
Una serie di sezioni espandibili disposte verticalmente per le FAQ, le impostazioni e le pagine ricche di contenuti — con quel tocco neobrutalista fatto di bordi e ombre.
Area di scorrimento
Un contenitore scorrevole con barre di scorrimento personalizzate e compatibili con tutti i browser per finestre di chat, barre laterali e alberi di file — con un cursore massiccio in stile neobrutalista.
Area di testo
Un campo di inserimento testo a più righe per commenti, biografie e messaggi di supporto — con lo stile neobrutalista caratterizzato da bordi e ombre.
Avanzamento
Una barra sottile che si riempie man mano che un’operazione viene completata — caricamenti, installazioni, procedure di onboarding in più fasi — con lo stile neobrutalista caratterizzato da bordi e ombre.
Avatar
Un'immagine utente con le iniziali come alternativa per i menu del profilo, i thread dei commenti e gli elenchi dei team — con il bordo spesso in stile neobrutalista.
Avviso
Un messaggio in linea per segnalare errori nei moduli, avvisi e conferme di esito positivo: riquadri colorati in base allo stato, con bordi in stile neobrutalista e ombre marcate.
Badge
Una piccola etichetta per stati, conteggi e tag su schede, tabelle e voci di navigazione — con lo stile neobrutalista fatto di bordi e ombre.
Barra dei menu
Una barra orizzontale con menu a tendina per barre degli strumenti, editor e dashboard in stile app — con quel tocco neobrutalista fatto di bordi e ombre.
Barra laterale
Un pannello di navigazione pieghevole per dashboard, documenti e strumenti di amministrazione — con quel tocco neobrutalista fatto di bordi e ombre.
Breadcrumb
Mostra la posizione della pagina nella gerarchia del sito — percorsi di collegamento per documenti, categorie del negozio e dashboard — con caratteri in stile neobrutalista in grassetto.
Calendario
Un selettore di date con griglia mensile per prenotazioni, pianificazione e selezione di intervalli — con lo stile neobrutalista caratterizzato da bordi e ombre.
Campo
Etichette, campi di controllo, testi di aiuto e messaggi di errore per pannelli di impostazioni, moduli di pagamento e procedure di registrazione — con lo stile neobrutalista.
Carosello
Una presentazione scorrevole per gallerie di prodotti, testimonianze e sezioni in primo piano — con bordi in stile neobrutalista e ombre marcate.
Casella combinata
Un campo di inserimento con completamento automatico che filtra le opzioni mentre digiti — menu di selezione dei paesi, campi per i tag, menu a scorrimento — con bordi e ombre in stile neobrutalista.
Casella di spunta
Un pulsante binario per le caselle di consenso, i filtri a selezione multipla e la selezione di più righe contemporaneamente — con lo stile neobrutalista fatto di bordi e ombre.
Cassetto
Un foglio controllato dai gesti che scivola da qualsiasi bordo per menu mobili, filtri e moduli rapidi — con bordi e ombre in stile neobrutalista.
Comando
Una tavolozza di comandi gestibile da tastiera per i menu ⌘K, la ricerca globale e le azioni rapide — con lo stile neobrutalista caratterizzato da bordi e ombre.
Comprimibile
Una coppia di pulsanti e pannelli per le strutture ad albero dei file, le impostazioni avanzate e le sezioni “Mostra altro” — con lo stile neobrutalista caratterizzato da bordi e ombre.
Cursore
Un campo di input trascinabile per selezionare un valore o un intervallo — volume, filtri di prezzo, impostazioni — con lo stile neobrutalista caratterizzato da bordi e ombre.
Direzione
Un provider di contesto che inverte l'orientamento dei componenti tra LTR e RTL, in modo che menu, cursori e schede si visualizzino correttamente in arabo, ebraico e persiano.
Elemento
Una riga flessibile con slot per contenuti multimediali, titolo, descrizione e azione, pensata per i feed di notifiche, gli elenchi delle impostazioni e le righe dei file — in stile neobrutalista.
Etichetta
Una didascalia per campi di immissione, caselle di selezione, interruttori e gruppi di pulsanti opzionali — i clic attivano il controllo, scritta con il carattere neobrutalista dell'intestazione.
Finestra di avviso
Una finestra modale che blocca il flusso in caso di azioni distruttive — elimina, esci, annulla — con quel tipico stile neobrutalista fatto di bordi e ombre.
Finestra di dialogo
Una finestra modale per conferme, moduli rapidi e richieste di conferma per azioni irreversibili — sovrapposta alla pagina con bordi spessi e un'ombra marcata.
Gruppo di input
Aggiungi icone, pulsanti e suggerimenti da tastiera ai campi di immissione per le barre di ricerca, i campi URL e le finestre di chat — con bordi e ombre in stile neobrutalista.
Gruppo di pulsanti
Unisce pulsanti divisi, barre degli strumenti e componenti aggiuntivi di input in un’unica unità incorniciata: un bordo spesso, un’ombra marcata, un unico comando.
Gruppo radio
Una serie di pulsanti di opzione a scelta singola per i moduli relativi a piani, opzioni di spedizione e impostazioni — con lo stile neobrutalista caratterizzato da bordi e ombre.
Gruppo toggle
Gruppi di pulsanti a due stati per le barre degli strumenti dell'editor, i selettori di vista e le barre dei filtri — con lo stile neobrutalista caratterizzato da bordi e ombre.
Input
Un campo di testo a riga singola per login, barre di ricerca e moduli di pagamento — con il bordo spesso in stile neobrutalista e l’effetto ombra marcata.
Input OTP
Campi per l'inserimento di codici monouso per l'autenticazione a due fattori (2FA), la verifica dell'accesso e le schermate del PIN — campi che supportano l'incollaggio, con bordi in stile neobrutalista e ombre marcate.
Interruttore
Un pulsante on/off per impostazioni immediate — notifiche, modalità scura, feature flag — con quel tocco neobrutalista fatto di bordi e ombre.
Interruttore
Un pulsante on/off a due posizioni per i controlli di formattazione, silenziamento e fissaggio della barra degli strumenti — con lo stile neobrutalista caratterizzato da bordi e ombre.
Menu a discesa
Un menu attivabile tramite pulsante per le azioni sulle righe, il cambio di account e le opzioni di visualizzazione — con lo stile neobrutalista caratterizzato da bordi e ombre.
Menu contestuale
Un menu contestuale per le righe dei file, le aree di lavoro e le griglie di dati: azioni contestuali con lo stile neobrutalista caratterizzato da bordi e ombre.
Menu di navigazione
Una barra orizzontale con link e pannelli a tendina per le intestazioni del sito, le barre di navigazione dei documenti e le interfacce delle app — con bordi in stile neobrutalista e ombre marcate.
Paginazione
Link alle pagine numerate con i pulsanti “precedente” e “successivo” per i risultati di ricerca, le tabelle e gli archivi — nello stile neobrutalista con bordi e ombre.
Pannello laterale
Un pannello che scorre dal bordo dello schermo per i menu di navigazione, i filtri e i moduli di modifica — con lo stile neobrutalista caratterizzato da bordi e ombre.
Popover
Un pannello mobile collegato a un trigger per i selettori di data, i filtri e i moduli in linea — con lo stile neobrutalista caratterizzato da bordi e ombre.
Proporzioni
Adatta immagini, video incorporati e mappe a un rapporto fisso quando vengono ridimensionati: l'utility di layout che mantiene le schede in stile neobrutalista allineate alla griglia.
Pulsante
Un pulsante cliccabile per l'invio dei moduli, le barre degli strumenti e le conferme definitive — con bordi spessi e un'ombra che si incava al clic.
Ridimensionabile
Riquadri divisibili trascinabili per editor di codice, alberi di file e layout di dashboard — con lo stile neobrutalista caratterizzato da bordi e ombre.
Scheda
Un riquadro con bordi per dashboard, livelli di prezzo e griglie di prodotti — intestazione, contenuto e piè di pagina con l'effetto "hard-shadow" in stile neobrutalista.
Scheda al passaggio
Un'anteprima mobile che si apre al passaggio del mouse — anteprime dei profili, anteprime dei link, termini del glossario — con lo stile neobrutalista caratterizzato da bordi e ombre.
Schede
Passa da un pannello all’altro — pagine delle impostazioni, dashboard e anteprime del codice — con lo stile neobrutalista caratterizzato da bordi e ombre.
Scheletro
Un blocco segnaposto lampeggiante per schede, avatar e tabelle mentre i dati vengono caricati — con il bordo spesso in stile neobrutalista.
Select nativo
Il menu a tendina nativo in HTML riprogettato per moduli, filtri e selettori di paesi — menu a tendina con rendering nativo del sistema operativo, con bordi e ombre in stile neobrutalista.
Selettore data
Un calendario a comparsa per selezionare singole date, intervalli e compleanni nei moduli e nei filtri — con bordi in stile neobrutalista e ombre marcate.
Selezione
Un menu a tendina per selezionare un'opzione — campi relativi al Paese, ordini di ordinamento, impostazioni del tema — con bordi spessi in stile neobrutalista e ombre marcate.
Separatore
Una linea orizzontale o verticale che divide menu, barre degli strumenti ed elenchi — disegnata con lo stesso colore di contorno a tinta unita delle cornici in stile neobrutalista.
Sonner
Notifiche a forma di toast sovrapposti per le conferme di salvataggio, i caricamenti e le finestre di annullamento — con lo stile neobrutalista fatto di bordi e ombre.
Spinner
Un indicatore di caricamento animato per invii in sospeso, recuperi e stati di occupato in linea: un'icona pronta all'uso per qualsiasi controllo neobrutalista.
Tabella
Una tabella HTML semantica per fatture, elenchi amministrativi e tabelle dei prezzi — righe con bordi, intestazioni in grassetto e un'ombra decisa in stile neobrutalista.
Tabella dati
Tabelle ordinabili, filtrabili e impaginate per pannelli di amministrazione, dashboard ed elenchi di ordini — con lo stile neobrutalista caratterizzato da bordi e ombre.
Tasto
Tasti della tastiera con indicazioni sulle scorciatoie nei menu, nei tooltip e nelle palette dei comandi — un elemento kbd nativo con bordi e ombre in stile neobrutalista.
Tipografia
Ricette di base per titoli, testo corpo, elenchi, tabelle e codice in linea — impaginate secondo lo stile neobrutalista dal look massiccio.
Tooltip
Suggerimenti al passaggio del mouse e quando si seleziona per i pulsanti con icona, le scorciatoie da tastiera e le etichette troncate — con l'effetto neobrutalista di bordi e ombre.
Vuoto
Un segnaposto per ricerche senza risultati, dashboard vuote e schermate iniziali: icona, titolo e azione incorniciati da bordi in stile neobrutalista.
Amato da dev, designer
e creator
Mi sono imbattuto nel tuo kit UI e l’ho preso subito. Colpito nel vedere che è nuovo, mantenuto attivamente e migliorato di continuo. Lavoro pazzesco! 🤘
Ziv Reich, Sviluppatore software Volevo solo dire: ottimo lavoro con neobrutalism.com. Mi piace davvero. Sono negato con il design, quindi per me è stato fantastico. L’ho usato sul mio sito personale.
Paul Bratslavsky, Creatore di Coding With Paul Finalmente ho rifatto il mio sito personale con Neobrutalism.com — libreria divertente e semplicissima da iniziare!
Cameron Blackwood, Content creator Neobrutalism.com è una delle mie librerie di componenti UI retro preferite — componenti che si shippano davvero.
Zhengyang Hou, Indie hacker una delle mie librerie ui preferite per il web. ottimo lavoro — spero che vada alla grande.
Taseen Tanvir, Founder e designer Ho appena provato Neobrutalism.com Pro — un kit UI che non somiglia a tutto il resto. I blocchi neobrutalisti 🔥 hanno reso più veloce prototipare layout strani e divertenti.
Nitesh Padghan, Ghostwriter Design di landing page bellissimo, con equilibrio e flusso perfetti. La palette di colori unita alle animazioni crea un’esperienza utente eccezionale.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Sono davvero impressionato dal design che hanno consegnato. Il prodotto finale corrisponde esattamente a quello che avevo in mente.
Desmond, Co-fondatore @ VectorlabsVentures Come titolare di agenzia di solito passo settimane a rifinire i layout delle landing per i clienti. Con Neobrutalism.com inserisco un template, regolo il copy e sono pronto a pubblicare.
Duke Opoku Amankwah, Fondatore @ Midas I template non sono solo splendidi visivamente: sono anche strutturati benissimo. Ci hanno fatto risparmiare settimane di sviluppo.
Abiola Braimah, Sviluppatore @ Studio IX Qualità eccellente e attenzione ai dettagli. Il design responsive funziona alla perfezione su tutti i dispositivi.
Acromond X., Co-fondatore @ VectorlabsVentures Integrare questi template nel nostro workflow ha ridotto in modo significativo il ciclo di sviluppo. Ottimo lavoro.
Raquib S., Sviluppatore backend Questi template sono diventati la nostra risorsa di riferimento. Il codice è pulito, ben documentato e facilmente personalizzabile.
Hallic M., Sviluppatore @ AtlasLabs I template di Neobrutalism.com trovano l’equilibrio perfetto tra estetica e funzionalità. Un vero game-changer per i nostri progetti.
Ibrahim S., Frontend Lead @ ScaleUp Supporto eccellente e template di qualità premium. Il ROI di questi template è fenomenale.
Kevin K., CEO @ WebCraft I template di Neobrutalism.com hanno trasformato del tutto il modo in cui affrontiamo i progetti clienti. La qualità del codice è eccezionale e i design sono di prim’ordine.
Danny G., Fondatore di DevStack Ho usato molte librerie di template, ma Neobrutalism.com si distingue per l’attenzione all’ottimizzazione delle performance e a un’architettura di codice pulita.
Ian D., CTO di Wavelength Le animazioni e le micro-interazioni di questi template sono assolutamente stupefacenti. Il miglior investimento per il nostro team design.
Ben S., Lead Designer di PixelPerfect Come founder non tecnico, i template di Neobrutalism.com ci hanno aiutato a lanciare l’MVP in tempi record senza scendere a compromessi sulla qualità del design. I nostri investitori sono rimasti a bocca aperta.
Matthew I., Fondatore di startup Apprezzo quanto siano modulari e ben documentati questi componenti. Abbiamo potuto mischiare pezzi di template diversi senza attriti.
Garrett P., Frontend Lead di TechFusion Il ROI dei template di Neobrutalism.com è incredibile. Abbiamo ridotto drasticamente i tempi di sviluppo consegnando siti di qualità superiore ai clienti.
Xavier C., Titolare di agenzia
Componente
galleria FAQ
Questa griglia di elementi di base gratuiti: i backend su ogni pagina della documentazione, l'installazione di CLI e come la galleria si collega a /docs /components.