Introduction

Czym jest neobrutalizm?#

Neobrutalizm to styl projektowania stron internetowych, który pojawił się pod koniec lat 2010. jako reakcja na monotonność płaskiego, minimalistycznego wzornictwa. Czerpie on z surowości architektury brutalistycznej — autentycznych materiałów, widocznej konstrukcji — i przenosi ją na ekran za pomocą odważnych kolorów oraz figlarnej geometrii.

Można to rozpoznać po pięciu cechach:

• Grube obramowania — każdy element jest otoczony konturem, zazwyczaj w jednolitej czerni.
• Ostre cienie — płaskie przesunięcia bez rozmycia, dzięki czemu elementy sprawiają wrażenie fizycznie ułożonych jeden na drugim na stronie.
• Wyraziste kolory — wypełnienia o wysokim kontraście i dużej nasyceniu. Bez gradientów, bez efektu „glassmorphism”.
• Prostokątne narożniki i pogrubiona czcionka — geometria, która zajmuje przestrzeń, zamiast się za to przepraszać.
• Interakcja dotykowa — po kliknięciu przyciski wyraźnie zapadają się, tworząc cień.

Nic nie unosi się w powietrzu, nic nie jest rozmyte, nic nie pozostaje ukryte. Przeprojektowanie serwisu „Gumroad” w 2021 roku sprawiło, że ten styl stał się powszechny; obecnie jest to najczęściej wybierane rozwiązanie w przypadku produktów, które mają wyglądać na zaprojektowane z zamysłem, a nie na domyślne.

Czym jest Neobrutalism.com?#

Neobrutalism.com jest systemem projektowym, który zapewnia stylizację serwisu React — opartym na tym samym modelu rejestru, co serwis shadcn/ui. Nie trzeba instalować żadnego pakietu: polecenie shadcn CLI kopiuje kod źródłowy każdego komponentu do Państwa projektu, a od tego momentu staje się on Państwa kodem.

Co znajdziecie w środku:

• Elementy — kompletny zestaw, zaprojektowany zgodnie z jedną koncepcją, dzięki czemu obramowania, cienie i czcionki są ze sobą spójne.
• Bloki — gotowe sekcje: bohaterowie, tabele cenowe, ekrany logowania, pulpity nawigacyjne.
• Szablony — gotowe strony internetowe i panele administracyjne.
• Motywy — narzędzie do tworzenia motywów z gotowymi szablonami, które można udostępniać.
• Figma zestaw — ten sam system dla projektantów.
• MCP serwer — edytory oparte na sztucznej inteligencji, takie jak Claude Code i Cursor, mogą dodawać komponenty na podstawie nazwy.

Dwa elementy podstawowe, jeden styl#

Każdy komponent jest dostarczany w dwóch wariantach. Wybór należy dokonać dla każdego komponentu w trakcie instalacji — adres URL instalacji decyduje o tym, który wariant zostanie pobrany:

• Radix UI — elementy podstawowe, na których działa już większość projektów typu „shadcn”.
• Base UI — najnowsze elementy podstawowe opracowane przez zespół Radix oraz MUI.

Ten sam wygląd, te same dane eksportowe, ten sam interfejs API. Dostępność — fokus, obsługa klawiatury, czytniki ekranu — wynika z podstawowych elementów leżących u podstaw.

Proszę spróbować#

Jedno polecenie, bez konfiguracji:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json
Kopiuj

Następnie przejdź do sekcji „Instalacja”, aby pobrać czcionki i tokeny motywów, lub najpierw przejrzyj dostępne komponenty.