NeobrutalistyczneReact UI komponenty
Dostępne komponenty React w stylu neobrutalistycznym — grube ramki, twarde cienie, krzykliwy kolor. Każdy jest w wersji Radix UI, Base UI i React Aria, instaluje się przez shadcn CLI i trafia do ciebie jako kod, który należy do ciebie.
Przycisk
01/07Wciska się we własny twardy cień.
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.