Neobrutalism components – A collection of react-tailwind components
github.comHi, can you give me your opinion about this project? What else I should add?
As you're asking for feedback: the components are not accessible. I've assessed a lot of UI libraries [1] and most of them have issues. You can start with running Lighthouse (Audit tab in Chrome) to get and fix at least all the tool-detectable issues.
I was sad to not see vuetify in the reviews. I was wondering how it stacks up since it lists a11y as core feature.
I will fix it. Nice blog post btw.
Good effort! (I mean that)
Not a criticism of your project, but could someone give me an idea as to why neobrutalism is popular at the moment? I first noticed this trend on Gumroad's site. It def looked cool, but more sites seem to have adopted this style, so much so it seems like an entire design pattern (sort of like material). It doesn't strike me as "timeless", more like a cool trend.
I did not understand this part: I created this collection of components for people who want to learn more about neobrutalism.
There was nothing explaining what "neobrutalism" is.
Brutalism is a architectural style that was particularly popular in the 50s and 60s, characterised by lots of concrete and flat surfaces. See for instance the Boston City Hall or Trellick Tower in London.
Neobrutalist is a term that is being used quite a bit now to refer to user interface designs with a similar aesthetic, that being plain colours and sharp angles.
I thought that was "flat UI." Or it was a few years ago.
Seems like they're trying to glorify an aesthetic that was anti-glory to begin with.
Design feedback: Active tab has no contrast at all. Same with: select options, side menu.
Slightly harsh but probably an easy fix!
To me Neobrutalism is all about being brutally readable (or maybe that's just what I like about it)
I will fix it, thanks.
It's rather hard to figure out the difference between interactable and non-interactable elements - buttons have the same drop-shadow as badges.
Everything looks like a button.
Everything is a button if you're persistent enough.
exactly
Congrats on the project, what you did looks nice but I have to say this: “brutalism” and “react” kind of clash in my mind. I understand you’re inspired by the brutalist aesthetics, but I read the very definition of brutalism as “not react”.
Cool look.
However, buttons don't become "unpressed" on Firefox Android after touching them. They never get their shadow back.
Hi, can you tell me which device you're using as well as the browser version, ty.
Huawei P30, Firefox for Android 118.1.1
This is great.
Just yesterday, i was looking for something like this, and found: https://themeforest.net/item/bruddle-neo-brutalism-ui-kit-fo... - Having actual react components will make it much easier to build new stuff.
I really like the look and feel, but I believe my next side project will be more pixel design/90s, which looks more "techy" for me.
Thank you!
Love this look and feel. Nicely done.
Are the text fields meant to press (move and lose shadow) when they have content?
Whereas the option button group doesn't press.
Sorry, I don't have any ideas for making the feel part more consistent.
(For I only have the design sense of stale bread. Which is why I marvel when design people like you do this kind of work.)
Thanks.
Input fields move and lose shadow while they are in focus.
"Whereas the option button group doesn't press." I guess you are thinking about tabs. Idk honestly why I didn't make them press.
The button doesn’t have type=button, ffs.
Thanks for letting me know, I didn't even notice that lol. I will fix it.
Looks great. Maybe a switch component?
sure why not
Looks great! Not sure if this is a Tailwind thing or not, but I think any presence of hex codes in your examples is a little disappointing. It should be trivial to adjust colors from a fixed palette, rather than find-replacing hex codes across a codebase. Especially for modifier colors like the active tab states.
EDIT: I realize now that this is meant to be copied into an existing codebase, not used as a library, so you are expected to adjust this to your taste.
That's tailwind in a nutshell. If you want to change colors across a code base, you have to find and replace. Now, the colors are "named" using a system, but it's still f&r
You're out here telling lies: https://tailwindcss.com/docs/customizing-colors#adding-addit...
Dealing with colors in Tailwind is no worse or better than any other theming system with named colors.
Unless you name colors something like background, yes you do have to go through the whole HTML codebase and swap bg-gray-400 to bg-blue-600
To quote an Ask HN from 10 months ago:
Do users like an aesthetic remarkable for it's not blending in anywhere, ease of construction, and lack of polish, or is the predilection towards brutalism a byproduct of the people making it not wanting to put in the care or work to make something fit?
I like it, and in this scenario I'd be a user.
Nice touch with the marquee component!
Maybe as an addition you could introduce animations with jagged easings such as slide in, spring ... DHTML style.
I'm probably not the target market for this, but my first observation is that this reminds me of dev.to's visual aesthetic
This reminds me of gov.uk esthetic a bit, especially when it comes to buttons: https://design-system.service.gov.uk/components/button/
"ugly" is not an aesthetic
ugly is an aesthetic and it communicates, when intentional, a focus on function or simplicity rather than looks. Now to your point, ugly in anything more than a css stylesheet is a little bit moot as it is an aesthetic that remains superficial and does not inform the implementation but only the consumption.
What a ridiculously inaccurate thing to say
of course it is
The border radii don’t quite fit together, and you can easily see the gaps on an iPad.
It would feel more appropriate to me to not have rounded corners at all - you'd be hard pushed to find rounded edges on a truly brutalist block of flats!
I should have mentioned this in readme and docs, but the point of this project is to inspire you to make your own neobrutalism components based on those I created. You can edit them however you like :)
Can you tell me the exact device you're using, the browser and its version? Thank you.
An iPad with iOS 17.
How about a textarea component that expands as needed to fit the content?
It would be far more brutal to just limit all textareas to 30 characters and let the user suffer.
I get you're craking a joke, which made me laugh, but just in case you weren't aware the original meaning of "Brutalism" was from the French word "brut" or "raw". Think raw concrete, not "being brutal to someone".
This is the smallest/easiest trick to do what you need(see full code in the embedded Codebox): https://css-tricks.com/the-cleanest-trick-for-autogrowing-te...
You might have to figure out how to properly set it up in React
love this! will use for personal site
ty