4 ms·
Show HN: Neobrutalism.dev – Just added Base UI support and added new color theme
- samastur 19d agolooks awful (to provide a genuinely felt counter view)
- kypro 19d agoOn very spacious and minimalist sites it can be okay, but find this extremely noisy and hard to scan, https://www.neobrutalism.dev/docs/calendar https://www.neobrutalism.dev/docs/calendar I'm normally quite unopinionated on UI styles, but there's something about this style that feels actively hostile to my ability to concentrate on the content. It's not so much that I don't like it, it's just uncomfortable visually to me. I assume it's only me, but would be interested if others have the same problem.
- ls1911 19d agonice web design !
- owencmcgrath 19d agolooks great!
- elicash 19d agoThe charts are particularly great. I will say I'm afraid to use this style because Gemini seems to love it so much and therefore users will make assumptions about how the website was created.
- cjs_ac 19d agoUnless you're building apps for people who are also in tech, your users won't have any idea what UI styles different LLMs push.
- elicash 19d agoThat might be true for them to know it was AI. Which yes, was how I worded it. But not necessarily good enough for it to be differentiated from everything else. For example, in the Bootstrap days everything looked like Bootstrap and users got used to that, even if users hadn't specifically heard of the CSS framework.
- elicash 18d agoI meant to say it was NOT how I worded it!
- lateatdesk 18d agoI think I could use those charts and still give my site its own look. I get the Bootstrap comparison though.
- slig 19d agoLooks great, thanks for sharing. Do you plan to add Dark Mode and/or Shadcn theming?
- wps 19d agoReally unfortunate how much I immediately associate this with vibe coded sites. So many models trend to this exact neobrutalist style when any semblance of Swiss design or minimalism is mentioned in the prompt. However, I really do like how the style looks on some sites, like in https://www.not-ship.com/united-nations-map/ https://www.not-ship.com/united-nations-map/ which was on HN earlier.
- yieldcrv 19d agoI associate beige or purple extremely long landing pages with vibe coded alongside infinite tangentially related features, because it lacks intention but the creator was stuck in a bout of AI psychosis here, on the other hand, I’m wondering why they would even release this, as it should be a component for more intentional vibe coding. A Claude design template masqueraded as a whole framework
- moreveal 18d ago[dead]
- bradly 19d agoI enjoy the look of these, but personally I wouldn't have thought to describe them as neobrutalist, so I'm thinking I don't know what it is. How is brutalism defined in this context? When I think web brutalism I think Craigslist style sites and reduction of superfluous design elements.
- netsharc 19d agoYeah, I can't stand these influencer-wannabe web-devs misusing terms. béton brut means "raw concrete" in French, and in architecture that's what brutalism is. I'd say only sites that look like they use the default style of HTML with no CSS on Netscape 1.x could be called "brutalist"... E.g. https://stallman.org https://stallman.org IMO the design is more "Windows 3.1 Hot Dog Stand Theme" https://blog.codinghorror.com/a-tribute-to-the-windows-31-hot-dog-stand-color-scheme/ https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho... combined with MS WordArt...
- martythemaniak 19d agoRight, hence why it's called "Neo-brutalist" and not "brutalist". It's not just plain un-styled html.
- samastur 19d agoNeo just means new. It's not an out-of-jail card if it is completely unrelated to the old/real thing.
- wpm 19d agoNeo doesn't mean it can just be a completely different thing, it means its a modern take on the same thing from before but slightly evolved. Neo-Classicism still looks like Classicism. Neo Nazis are still Nazis. If I create something called Neo-Cuisine, you'd expect the result to be edible. If I see something calling itself "Neo-Brutalist Architecture", I'd expect it to look like Brutalism, or have some hallmark of the style. e.g. raw, but a different material new to the time period). As far as web design, there's nothing "raw" about 100s of dependencies and animated charts and rounded rects and opinionated fonts and the rest of the this pastiche in "64 components, charts and star shapes for React and Tailwind v4. Built on shadcn/ui and Base UI." This is just Corporate Memphis + dialog aesthetics[0] [0]: https://invisible-island.net/dialog/ https://invisible-island.net/dialog/
- raincole 19d agoI just realized this is one more thing destroyed by LLM after em-dashes.
- switchbak 19d agoThis is like the high waisted, mom-pants of browser UI design.
- brauhaus 19d agoIs a dark mode available? That's the bit I struggle the most with this style.
- ricardobeat 18d agoNot everything should have a dark mode. As a style that requires bright contrasting borders and heavy shadows, this is not particularly pleasant as a dark theme. See the “Hardbrut” in dark mode, posted elsewhere in this thread. The white “shadows” are an eye sore.
- Svoka 19d agoBrutalism? More like 'Back to school' vibes to be honest
- accrual 19d agoAgree, this would probably be great UI for K-6 level educational apps.
- jawngee 19d agotrapper keeper-ism
- martythemaniak 19d agoI love it! I've been using my own styling for my various projects that I call "Soft NeoBrutalism" that's more colourful and lower contrast since I find most neobrutalist styles to be too stark. Sample here: https://frost-e.com/design-system/ https://frost-e.com/design-system/ Since mine is just a hacky vibe-coded single css file, I might switch to yours with a custom colour scheme.
- slig 18d agoI liked yours very much, thanks for sharing.
- julianlam 19d agoAh, yes, the Brite Bootswatch skin. No need to mess around further.
- rodolphoarruda 19d agoIs there a pure CSS or CSS + JS alternative that does not rely on React?
- lioeters 19d agoI wish. React + Tailwind as the commonly accepted default is too bad, it sacrifices portability for convenience. It's legacy code in the making, like jQuery and Bootstrap.
- bl4kers 19d agoFirst thing I thought. Tying it to React is a shame.
- shimman 19d agoYeah. Neobrutalism is mostly about the drop shadows + bright color palette. You don't really need a component library for what should be some basic CSS rules.
- altbdoor 18d agoHaven't use it myself, but I've bookmarked https://basecoatui.com/ https://basecoatui.com/ to try in future.
- nzeid 19d agoReminds me of Notion and old Basecamp. This is a very easy sell for me because everything these days is doing the infuriating gray text on gray background.
- mrweasel 19d agoWouldn't web brutalism be using the browsers "native" component, as in don't style <input> elements?
- ricardobayes 19d agoThis is pretty cool however I feel it's inconsistent. Some elements have a drop shadow and some don't (Button vs Button Group).
- tolerance 19d agoThis is actually "Post-Corporate Memphis". Says me. These pages are closer to "neobrutalism" or what I would call "Cybermod" [0], I think... <https://webb.page https://webb.page> <https://garden.bradwoods.io https://garden.bradwoods.io> [0]: <https://news.ycombinator.com/item?id=44415330 https://news.ycombinator.com/item?id=44415330>
- ricardobeat 18d agoThose two websites have nothing in common. “Neobrutalism” might be wrong in concept, but it was coined around 2023, that ship has sailed.
- tolerance 18d agoWow, really? Nothing? Care to share why you think so? > “Neobrutalism” might be wrong in concept, but it was coined around 2023, that ship has sailed. Who cares. It's 2026. All it takes to sink a sailing ship is a few determined gents in a motorboat. It's called Post-Corporate Memphis!
- notglossy 18d agoPost Corporate-Memphis makes sense. Personally it reminds me of vintage Colorforms. Maybe also could be described as Post Layervault as I don’t recall a website using so many primary colors and flat shading before they made it cool.
- jumploops 19d agoI'm a big fan of neobrutalist UIs, but I think it's easy to overdo it. This component library and the LLM default interpretation of the style is very much "in your face." As an example, the black scrollbar here[0] is very heavy, a component which isn't meant to be looked at, but is distracting on first glance. Prompting an LLM to make "lightly styled" neobrutalist is much more pleasing to my eyes, but maybe I'm alone in that. [0]https://www.neobrutalism.dev/docs https://www.neobrutalism.dev/docs
- supernihil 19d agoShameless plug for HARDBRUT as well: https://supernihil.github.io/hardbrut/ https://supernihil.github.io/hardbrut/ Dark/light, accent colors but otherwise no customization. Going after standardized ui. Css blob with builtin font, or no font. Kotlin components as well
- thejazzman 19d ago…and I thought I was clever when I designed https://poolometer.com https://poolometer.com to look kind a 1990s summer party / Memphis design
- stuaxo 18d agoThis reminds me certain flash based websites 20 years ago.
- kazinator 18d agoThis is insanely verbose just for a button with a tooltip: import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" export default function TooltipDemo() { return ( <TooltipProvider> <Tooltip> <TooltipTrigger render={<Button variant="noShadow" />}> Hover </TooltipTrigger> <TooltipContent> <p>Add to library</p> </TooltipContent> </Tooltip> </TooltipProvider> ) } Contrast with plain old HTML form button where the title attribute gives the tooltip text: <button type="submit" title="Add to library!">Hover</button>
- Waterluvian 18d agoYeah but can your tooltip render in neon brown?
- kazinator 18d agoNot sure; it may be doable remotely with some CSS, in which case it would be a few lines of code for any number of buttons.
- Waterluvian 18d agoJoking aside, I don’t believe you can and I’m fine with that. It’s still so much simpler and predictable.
- kazinator 18d agoI do have a vague memory of working with tooltips intensively (the above kind with title attributes on form elements) and there not being a lot of flexibility.
- sph 18d agoHaven’t you heard that you’re not supposed to type code anymore?
- columk 18d agoDoesn't this tell you to stop using this style? It was fresh a few years ago when examples started popping up (Figma) but now Gemini churns it out and there are tons of templates and libraries that use the most common styling. It's not fun when there's a component library and everyone's site looks like it came from the same template. Brutalist web design (which is really popular with artists, musicians and designers) is a beautiful style that leaves a lot of room for creativity, whereas this stuff is formulaic garbage.
- FlameWolf 18d agoDark mode?
- hulitu 18d agoWhat is wrong with you, people ? Clearly delimited and readable UI elements, no themes (also called "dark/light") ? Something must be wrong here. /s
- edwardbonnett 18d agowonder what a whole page of this looks like, might be a bit much
- ls1911 16d agohttps://uhbs.github.io/uhbs-standard/ https://uhbs.github.io/uhbs-standard/ using it as well
- travishenderson 15d ago[flagged]