NeobrutalistyczneReact UI komponenty
Komponenty UI React open source w neobrutalistycznym stylu — grube ramki, twarde cienie i mocny kolor. Zainstaluj je przez shadcn CLI albo przez agenta AI i nasz serwer MCP. Działają z Radix UI, Base UI i React Aria. Kod trafia do twojego repo i należy do ciebie.
Shell command: npx shadcn add neobrutalism.com/r/base/button.json- 50+ elementy
- Grube obramowania, ostre cienie
- shadcn CLI zainstalować
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- Dostępne domyślnie
- Kod należy do Ciebie
- MCP wsparcie techniczne serwerów
- Tryb ciemny i „RTL”
- Głośne małe wytwórnie
Wszystkie komponenty
Akordeon
Ułożony pionowo zestaw rozwijanych sekcji dla sekcji FAQ, ustawień i stron z dużą ilością treści — z neobrutalistycznymi ramkami i cieniami.
Alert
Wbudowane podpisy informujące o błędach w formularzu, ostrzeżeniach i potwierdzeniach pomyślnego zakończenia — kolorowe panele z obramowaniami w stylu neobrutalistycznym i ostrymi cieniami.
Awatar
Zdjęcie użytkownika z inicjałami jako opcją zastępczą w menu profilu, wątkach komentarzy i listach zespołów — z grubą ramką w stylu neobrutalistycznym.
Element
Elastyczny wiersz z polami na multimedia, tytuł, opis i akcję – przeznaczony do kanałów powiadomień, list ustawień i wierszy plików – w stylu neobrutalistycznym.
Etykieta
Podpis dla pól wprowadzania danych, pól wyboru, przełączników i grup przycisków opcji — kliknięcie aktywuje element sterujący; napis jest wyświetlany czcionką w stylu neobrutalistycznym.
Etykietka
Wskazówki wyświetlane po najechaniu kursorem i przy naciśnięciu przycisków z ikonami, skróty klawiaturowe oraz skrócone etykiety — z neobrutalistycznym efektem obramowania i cienia.
Grupa opcji
Zestaw przycisków opcji z jednym wyborem dla formularzy dotyczących planów, opcji wysyłki i ustawień — z neobrutalistycznymi ramkami i cieniami.
Grupa pól
Dodaj ikony, przyciski i podpowiedzi klawiszowe do pól wprowadzania danych w paskach wyszukiwania, polach adresu URL i oknach tworzenia wiadomości na czacie — z neobrutalistycznymi obramowaniami i cieniami.
Grupa przełączników
Grupy przycisków z dwoma stanami dla pasków narzędzi edytora, przełączników widoków i pasków filtrów — z neobrutalistycznym wykończeniem w postaci obramowań i cieni.
Grupa przycisków
Łączy przyciski rozdzielone, paski narzędzi i dodatki do wprowadzania danych w jedną oprawioną całość — jedna gruba ramka, jeden wyraźny cień, jedno wspólne naciśnięcie.
Kalendarz
Wybór daty w układzie miesięcznym do rezerwacji, planowania i zaznaczania przedziałów czasowych — z neobrutalistycznymi ramkami i cieniami.
Karta
Ramka z obramowaniem do pulpitów nawigacyjnych, planów cenowych i tabel produktów — nagłówek, treść i stopka z efektem twardego cienia w stylu neobrutalistycznym.
Karta po najechaniu
Pływający podgląd, który pojawia się po najechaniu kursorem — podglądy profili, podglądy linków, hasła ze słownika — z neobrutalistycznymi ramkami i cieniami.
Karty
Przełączaj się między warstwowymi panelami treści — stronami ustawień, pulpitami nawigacyjnymi i podglądami kodu — z wykorzystaniem neobrutalistycznych ramek i cieni.
Karuzela
Pokaz slajdów z możliwością przewijania do galerii produktów, opinii klientów i sekcji głównych — w oprawie z neobrutalistycznymi ramkami i ostrymi cieniami.
Kierunek
Dostawca kontekstu, który przełącza komponenty między układem LTR a RTL, dzięki czemu menu, suwaki i zakładki są poprawnie odzwierciedlane w języku arabskim, hebrajskim i perskim.
Klawisz
Nakładki na klawisze z podpowiedziami skrótów w menu, dymkach i paletach poleceń — natywny element `kbd` z neobrutalistycznymi obramowaniami i cieniami.
Lista wyboru
Rozwijane menu do wyboru jednej opcji — pola krajów, kolejność sortowania, ustawienia motywu — z grubymi neobrutalistycznymi obramowaniami i ostrymi cieniami.
Menu kontekstowe
Menu po kliknięciu prawym przyciskiem myszy dla wierszy plików, obszarów roboczych i tabel danych — działania kontekstowe z neobrutalistycznymi ramkami i cieniami.
Menu nawigacji
Poziomy pasek z linkami i rozwijanymi panelami do nagłówków stron, nawigacji w dokumentach i szablonów aplikacji — z neobrutalistycznymi obramowaniami i ostrymi cieniami.
Menu rozwijane
Menu wywoływane przyciskiem, zawierające opcje dotyczące wierszy, przełączniki kont i opcje wyświetlania — z neobrutalistycznymi ramkami i cieniami.
Natywny select
Natywny element HTML `select` w nowej odsłonie do formularzy, filtrów i selektorów krajów — rozwijane menu renderowane przez system operacyjny z neobrutalistycznymi obramowaniami i cieniami.
Obszar przewijania
Przewijalny kontener z niestandardowymi, działającymi we wszystkich przeglądarkach paskami przewijania do okien czatu, pasków bocznych i drzew plików — z masywnym suwakiem w stylu neobrutalistycznym.
Obszar tekstu
Wielowierszowe pole tekstowe do wpisywania komentarzy, biografii i wiadomości do pomocy technicznej — z neobrutalistycznymi ramkami i cieniami.
Odznaka
Mała etykietka do oznaczania statusów, liczb i tagów na kartach, w tabelach i elementach nawigacyjnych — z neobrutalistycznymi obramowaniami i cieniami.
Okno alertu
Okienko modalne, które zatrzymuje proces w przypadku działań powodujących utratę danych — usunięcie, wylogowanie, odrzucenie — z neobrutalistycznym stylizowaniem ramek i cieni.
Okno dialogowe
Okno modalne do potwierdzeń, szybkich formularzy i monitów o działania powodujące utratę danych — wyświetlane na stronie z grubymi ramkami i wyraźnym cieniem.
Okruszki
Pokazuje, gdzie strona znajduje się w hierarchii serwisu — ścieżki linków do dokumentów, kategorii sklepu i pulpitów nawigacyjnych — pogrubioną czcionką w stylu neobrutalistycznym.
Paginacja
Linki do ponumerowanych stron z przyciskami „poprzednia” i „następna” dla wyników wyszukiwania, tabel i archiwów — w stylu neobrutalistycznym z ramkami i cieniami.
Panel boczny
Panel, który wysuwa się z krawędzi ekranu i służy do wyświetlania szuflad nawigacyjnych, filtrów i formularzy edycji — z neobrutalistycznymi ramkami i cieniami.
Pasek boczny
Składany panel nawigacyjny typu „app-shell” do pulpitów nawigacyjnych, dokumentów i narzędzi administracyjnych — z neobrutalistycznymi ramkami i cieniami.
Pasek menu
Poziomy pasek z rozwijanymi menu do pasków narzędzi, edytorów i pulpitów nawigacyjnych w stylu aplikacji — z neobrutalistycznymi obramowaniami i cieniami.
Pole
Pola na etykiety, elementy sterujące, teksty pomocy i komunikaty o błędach w panelach ustawień, formularzach płatności i procesach rejestracji — w stylu neobrutalistycznym.
Pole kombi
Pole z autouzupełnianiem, które filtruje opcje w trakcie wpisywania — listy krajów, pola tagów, długie listy wyboru — z neobrutalistycznymi obramowaniami i cieniami.
Pole OTP
Pole do wpisania kodu jednorazowego dla uwierzytelniania dwuskładnikowego (2FA), weryfikacji logowania i ekranów PIN — pola obsługujące wklejanie z ramkami w stylu neobrutalistycznym i ostrymi cieniami.
Pole tekstowe
Jednowierszowe pole tekstowe do logowania, paski wyszukiwania i formularze płatności — z grubą ramką w stylu neobrutalistycznym i wyraźnym cieniem.
Pole wyboru
Przełącznik dwustanowy do pól zgody, filtry z możliwością wyboru wielu opcji oraz zbiorcze zaznaczanie wierszy — z neobrutalistycznymi obramowaniami i cieniami.
Polecenie
Paleta poleceń obsługiwana za pomocą klawiatury do menu ⌘K, wyszukiwania globalnego i szybkich akcji — z neobrutalistycznymi ramkami i cieniami.
Popover
Pływający panel przypisany do elementu wyzwalającego dla selektorów daty, filtrów i formularzy wbudowanych — z neobrutalistycznymi ramkami i cieniami.
Postęp
Wąski pasek, który wypełnia się w miarę wykonywania zadania — przesyłanie plików, instalacje, wieloetapowa rejestracja — z neobrutalistycznymi obramowaniami i cieniami.
Proporcje
Ogranicza obrazy, osadzone filmy i mapy do stałego współczynnika proporcji podczas skalowania — narzędzie do układania, które sprawia, że karty w stylu neobrutalistycznym pozostają w siatce.
Przełącznik
Przełącznik typu „włącz/wyłącz” do błyskawicznej zmiany ustawień — powiadomień, trybu ciemnego, flag funkcji — z neobrutalistycznymi ramkami i cieniami.
Przełącznik
Dwustanowy przycisk włączania/wyłączania do sterowania formatowaniem paska narzędzi, wyciszeniem i przypinaniem — z neobrutalistycznymi ramkami i cieniami.
Przycisk
Klikalny przycisk do wysyłania formularzy, pasków narzędzi i potwierdzeń z możliwością anulowania — z grubymi obramowaniami i cieniem, który pojawia się po kliknięciu.
Pusty
Element zastępczy dla wyników wyszukiwania bez wyników, pustych pulpitów nawigacyjnych i ekranów przy pierwszym uruchomieniu — ikona, tytuł i akcja otoczone ramkami w stylu neobrutalistycznym.
Separator
Pozioma lub pionowa linia dzieląca menu, paski narzędzi i listy — narysowana w tym samym jednolitym kolorze obramowania, co ramki w stylu neobrutalistycznym.
Sonner
Powiadomienia w formie ułożonych na sobie okienek typu „toast” dotyczące potwierdzeń zapisywania, przesyłania plików i okienek cofania — z neobrutalistycznymi ramkami i cieniami.
Suwak
Pole wprowadzania danych z możliwością przeciągania, służące do wyboru wartości lub zakresu — głośność, filtry cenowe, ustawienia — z neobrutalistycznym wykończeniem w postaci obramowań i cieni.
Szkielet
Pulsujący blok zastępczy dla kart, awatarów i tabel podczas ładowania danych — z grubymi ramkami w stylu neobrutalizmu.
Szuflada
Arkusz sterowany gestami, który wysuwa się z dowolnej krawędzi – idealny do menu mobilnych, filtrów i szybkich formularzy – z neobrutalistycznymi obramowaniami i cieniami.
Tabela
Semantyczna tabela HTML do faktur, list administracyjnych i tabel cenowych — wiersze z obramowaniem, pogrubione nagłówki i mocny cień w stylu neobrutalistycznym.
Tabela danych
Tabele z możliwością sortowania, filtrowania i paginacji do paneli administracyjnych, pulpitów nawigacyjnych i list zamówień — z neobrutalistycznymi ramkami i cieniami.
Typografia
Praktyczne szablony dla nagłówków, tekstu głównego, list, tabel i kodu w tekście — sformatowane w stylu neobrutalistycznym o mocnym wyglądzie.
Wskaźnik ładowania
Animowany wskaźnik ładowania dla oczekujących operacji wysyłania, pobierania i stanów zajętości w trybie inline — ikona, którą możesz po prostu wstawić do dowolnego elementu sterującego w stylu neobrutalistycznym.
Wybór daty
Kalendarz typu popover do wybierania pojedynczych dat, przedziałów czasowych i urodzin w formularzach i filtrach — z neobrutalistycznymi obramowaniami i ostrymi cieniami.
Zmienny rozmiar
Przesuwalne, dzielone okna do edytorów kodu, drzew plików i układów pulpitów nawigacyjnych — z neobrutalistycznymi ramkami i cieniami.
Zwinięty panel
Zestaw przycisków i paneli do drzewek plików, zaawansowanych ustawień i sekcji „pokaż więcej” — z neobrutalistycznymi ramkami i cieniami.
Uwielbiane przez deweloperów, projektantów
i twórców
Natknąłem się na twój UI kit i od razu go wziąłem. Projekt nowy, aktywnie rozwijany i wciąż ulepszany — kawał dobrej roboty! 🤘
Ziv Reich, Programista Chciałem tylko powiedzieć: świetna robota z neobrutalism.com. Naprawdę mi się podoba. Jestem beznadziejny w projektowaniu, więc to był strzał w dziesiątkę. Użyłem tego na swojej prywatnej stronie.
Paul Bratslavsky, Twórca Coding With Paul W końcu przebudowałem swoją prywatną stronę z Neobrutalism.com — fajna biblioteka, super łatwy start!
Cameron Blackwood, Twórca treści Neobrutalism.com to jedna z moich ulubionych bibliotek komponentów UI w stylu retro — komponenty, które naprawdę się shipuje.
Zhengyang Hou, Indie hacker jedna z moich ulubionych bibliotek ui do weba. świetna robota — oby projekt szedł coraz dalej.
Taseen Tanvir, Założyciel i projektant Właśnie wypróbowałem Neobrutalism.com Pro — UI kit, który nie wygląda jak wszystko inne. Neobrutalistyczne bloki 🔥 przyspieszyły prototypowanie dziwnych układów.
Nitesh Padghan, Ghostwriter Piękny design landing page z idealną równowagą i flow. Paleta kolorów w połączeniu z animacjami tworzy wyjątkowe doświadczenie użytkownika.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Jestem naprawdę pod wrażeniem designu, który dostarczyli. Finalny produkt dokładnie odpowiadał temu, co sobie wyobrażałem.
Desmond, Współzałożyciel @ VectorlabsVentures Jako właściciel agencji zwykle spędzam tygodnie na dopracowywaniu layoutów landingów dla klientów. Z Neobrutalism.com wkładam szablon, poprawiam copy i jestem gotowy do publikacji.
Duke Opoku Amankwah, Założyciel @ Midas Szablony nie tylko wyglądają rewelacyjnie — są też niesamowicie dobrze ustrukturyzowane. Oszczędziły nam tygodnie pracy deweloperskiej.
Abiola Braimah, Developer @ Studio IX Wybitna jakość i dbałość o detale. Responsywny design działa bez zarzutu na wszystkich urządzeniach.
Acromond X., Współzałożyciel @ VectorlabsVentures Włączenie tych szablonów do naszego workflow znacząco skróciło cykl rozwoju. Świetna robota.
Raquib S., Backend developer Te szablony stały się naszym podstawowym źródłem. Kod jest czysty, dobrze udokumentowany i łatwy do dostosowania.
Hallic M., Developer @ AtlasLabs Szablony Neobrutalism.com trafiają w idealną równowagę między estetyką a funkcjonalnością. Prawdziwy game-changer dla naszych projektów.
Ibrahim S., Frontend Lead @ ScaleUp Wybitne wsparcie i szablony premium. ROI tych szablonów jest fenomenalne.
Kevin K., CEO @ WebCraft Szablony Neobrutalism.com całkowicie zmieniły sposób, w jaki podchodzimy do projektów klientów. Jakość kodu jest wyjątkowa, a designy naprawdę world-class.
Danny G., Założyciel DevStack Korzystałem z wielu bibliotek szablonów, ale Neobrutalism.com wyróżnia się dbałością o optymalizację wydajności i czystą architekturę kodu.
Ian D., CTO w Wavelength Animacje i mikrointerakcje w tych szablonach są absolutnie oszałamiające. Najlepsza inwestycja dla naszego zespołu designu.
Ben S., Lead Designer w PixelPerfect Jako nietechniczny founder, szablony Neobrutalism.com pomogły nam uruchomić MVP w rekordowym czasie bez kompromisów w jakości designu. Nasi inwestorzy byli zachwyceni.
Matthew I., Założyciel startupu Doceniam, jak modularne i dobrze udokumentowane są te komponenty. Bez tarcia mieszamy elementy z różnych szablonów.
Garrett P., Frontend Lead w TechFusion ROI szablonów Neobrutalism.com jest niesamowite. Dramatycznie skróciliśmy czas developmentu, dostarczając klientom strony wyższej jakości.
Xavier C., Właściciel agencji
Komponent
galeria FAQ
Ta siatka darmowych elementów podstawowych — zaplecza na każdej stronie dokumentacji, instalacja CLI oraz sposób, w jaki galeria odnosi się do /docs /components.