# neobrutalistcomponents > Brutalist React components. Core and study themes, light and dark, one token contract. React 19, zero runtime dependencies, cascade-layered CSS driven by a closed --nbc-* token contract. Version 1.3.0. Install with `npm install neobrutalistcomponents`, import `neobrutalistcomponents/styles.css` plus one theme stylesheet, and wrap the app in ``. ## Docs - [Getting started](https://sssamuelll.github.io/neobrutalistcomponents/#/en/start): install, setup, fonts, bring-your-own theme - [Atlas](https://sssamuelll.github.io/neobrutalistcomponents/#/en/atlas): every theme, with its reference, every token and live contrast ratios - [Blocks](https://sssamuelll.github.io/neobrutalistcomponents/#/en/blocks): complete screens composed from the components ## Actions - [Button](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/button): A pressable slab that performs an action: four variants, three sizes on the shared control scale, a loading state and icon slots. ## Forms - [Checkbox](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/checkbox): A real native checkbox drawn as a brutalist box with check and mixed glyphs, with its label, description and error message built in. - [Input](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/input): A single-line text field with its label, description and error message built in, on the shared 32 / 40 / 48px control scale. - [RadioGroup](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/radio-group): Pick exactly one option from a small visible set: a fieldset with a legend whose Radio children are native radio inputs drawn as brutalist dots. - [Select](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/select): A native dropdown with its label, description and error message built in, a drawn chevron, and a fully themed list wherever the browser supports it. - [Switch](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/switch): A native checkbox with the switch role, drawn as a brutalist track and thumb, for settings that take effect the moment they flip. - [Textarea](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/textarea): A multi-line text field with the same label, description and error API as Input; it grows with its content, starting from `rows` lines. ## Display - [Alert](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/alert): An inline message about the state of the page or a task: four variants with a status icon and edge stripe, an optional title, action and dismiss button. - [Badge](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/badge): A small sticker that labels a status or a category: seven variants, two sizes, and room for a leading icon. - [Card](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/card): A bordered slab that groups related content, composed from Card.Header, Card.Title, Card.Description, Card.Content and Card.Footer. - [Kbd](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/kbd): A keyboard key cap for shortcuts in docs, menus and tooltips, in two sizes. - [Progress](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/progress): A bar that shows how far a task has gone, or that it is still running when the end is unknown: four variants, three sizes, an optional label and percentage. - [Table](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/table): A styled data table with native table semantics: a scroll wrapper, two densities, optional stripes, and alignment helpers for numeric columns. ## Overlays - [Dialog](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/dialog): A modal dialog on the native element: focus trap, Esc, inert background and top layer come from the platform. Controlled only. - [Tabs](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/tabs): Switch between views that share one place on the page, composed from Tabs.List, Tabs.Tab and Tabs.Panel. Follows the WAI-ARIA tabs pattern with automatic activation. - [Tooltip](https://sssamuelll.github.io/neobrutalistcomponents/#/en/components/tooltip): A short hint attached to a focusable element, shown on hover after a delay and immediately on keyboard focus, rendered in the top layer. ## Study themes Themes of the [neobrutalism study](https://sssamuelll.github.io/neobrutalistcomponents/#/en/), each read from one documented work. Same contract and geometry as the five core themes; import `neobrutalistcomponents/themes/.css`. - [Bauhaus Dessau](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/bauhaus-dessau): `bauhaus-dessau` — Bauhaus Building, Dessau (Bauhausgebäude Dessau), Walter Gropius, Dessau, Germany, 1925–1926. Germany, light native. - [DIN 1451](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/din-1451): `din-1451` — DIN 1451, the German standard lettering (DIN-Schrift), Ludwig Goller, Germany, 1931–1936. Germany, light native. - [Mäusebunker](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/maeusebunker): `maeusebunker` — Mäusebunker (former Central Animal Laboratories of the Free University of Berlin; Zentrale Tierlaboratorien der Freien Universität Berlin), Gerd Hänska, Magdalena Hänska, Kurt Schmersow, Lichterfelde, Berlin, Germany, 1971–1982. Germany, dark native. - [Munich 72](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/munich-72): `munich-72` — Visual design of the 1972 Munich Olympic Games (Visuelles Erscheinungsbild der Olympischen Spiele München 1972), Otl Aicher, Gerhard Joksch, Munich, Germany, 1966–1972. Germany, light native. - [Carlton](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/carlton): `carlton` — Carlton room divider, Ettore Sottsass, Milan, Italy, 1981. Italy, light native. - [Lettera 22](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/lettera-22): `lettera-22` — Olivetti Lettera 22 portable typewriter, Marcello Nizzoli, Giuseppe Beccio, Ivrea, Italy, 1950. Italy, light native. - [Dragon Quest](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/dragon-quest): `dragon-quest` — Dragon Quest (Famicom; ドラゴンクエスト), Yuji Horii, Koichi Nakamura, Akira Toriyama, Koichi Sugiyama, Japan, 1986. Japan, dark native. - [Nakagin](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/nakagin): `nakagin` — Nakagin Capsule Tower (中銀カプセルタワービル), Kisho Kurokawa, Ginza, Tokyo, Japan, 1970–1972. Japan, light native. - [Super Mario Bros.](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/super-mario-bros): `super-mario-bros` — Super Mario Bros. (Famicom; スーパーマリオブラザーズ), Shigeru Miyamoto, Japan, 1985. Japan, light native. - [Tokyo 1964](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/tokyo-1964): `tokyo-1964` — Poster for the Tokyo 1964 Olympic Games, Yusaku Kamekura, Tokyo, Japan, 1961. Japan, light native. - [Caracas signage](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/caracas-signage): `caracas-signage` — Signage and graphic identity of the Caracas metro (Metro de Caracas), Max Pedemonte, BMPT, Caracas, Venezuela, 1983. Latin America, light native. - [Many Vietnams](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/create-two-three-many-vietnams): `create-two-three-many-vietnams` — Create two, three… many Vietnams (OSPAAAL poster), Alfredo Rostgaard, Cuba, 1967. Latin America, light native. - [Lotería](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/loteria): `loteria` — Mexican lotería (the Don Clemente deck), Clemente Jacques, Mexico, 1887. Latin America, light native. - [SESC Pompéia](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/sesc-pompeia): `sesc-pompeia` — SESC Pompéia (Centro de Lazer Fábrica da Pompéia), Lina Bo Bardi, André Vainer, Marcelo Carvalho Ferraz, Pompeia, São Paulo, Brazil, 1977–1986. Latin America, light native. - [Amiga Workbench](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/amiga-os): `amiga-os` — Amiga Workbench 1.3, Commodore-Amiga, RJ Mical, United States, 1988. United States, light native. - [Mac OS X Aqua](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/aqua): `aqua` — Mac OS X (Aqua interface), Apple Computer, Cupertino, United States, 2000. United States, light native. - [Atari ST GEM](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/atari-gem): `atari-gem` — The GEM desktop on the Atari ST (TOS 1.0), Digital Research, United States, 1985. United States, light native. - [BeOS](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/beos): `beos` — BeOS 5, Be Inc., Menlo Park, California, United States, 2000. United States, light native. - [Classifieds](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/classifieds): `classifieds` — craigslist (classified-ads website), Craig Newmark, San Francisco, United States, 1995. United States, light native. - [iPhone OS 1](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/iphone-os): `iphone-os` — iPhone OS 1 (the original iPhone’s interface), Apple Inc., Cupertino, United States, 2007. United States, light native. - [Mac OS System 7](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/mac-os-classic): `mac-os-classic` — Mac OS System 7 (graphical user interface), Apple Computer, Cupertino, United States, 1991. United States, light native. - [Material Design](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/material-design): `material-design` — Material Design (version 1), Google, Mountain View, United States, 2014. United States, light native. - [NeXTSTEP](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/nextstep): `nextstep` — NeXTSTEP, NeXT Computer, Keith Ohlfs, California, United States, 1989. United States, light native. - [Palm OS](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/palm-os): `palm-os` — Palm OS on the Pilot 1000, Palm Computing, Rob Haitani, United States, 1996. United States, light native. - [Whaam!](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/whaam): `whaam` — Whaam!, Roy Lichtenstein, New York, United States, 1963. United States, light native. - [Windows XP](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/win-xp): `win-xp` — Windows XP (Luna visual style), Microsoft, Redmond, United States, 2001. United States, light native. - [Windows 3.1](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/win31): `win31` — Windows 3.1, Microsoft, United States, 1992. United States, light native. - [Windows 95](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/win95): `win95` — Windows 95 (graphical user interface), Microsoft, Redmond, United States, 1995. United States, light native. - [Xerox Star](https://sssamuelll.github.io/neobrutalistcomponents/#/en/theme/xerox-star): `xerox-star` — Xerox Star (8010 Information System), David Canfield Smith, Charles Irby, Ralph Kimball, Bill Verplank, Eric Harslem, El Segundo and Palo Alto, United States, 1981. United States, light native. ## Optional - [Full reference](https://sssamuelll.github.io/neobrutalistcomponents/llms-full.txt): every component, prop, rule and example in one file - [Source](https://github.com/sssamuelll/neobrutalistcomponents)