NeobrutalistaReact UI componenti
Componenti React accessibili in stile neobrutalista — bordi spessi, ombre nette, colori accesi. Ognuno arriva in versione Radix UI, Base UI e React Aria, si installa con la CLI di shadcn e diventa codice tuo.
Pulsante
01/07Si affonda nella propria ombra dura.
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.