6 ms·
Neobrutalism components – A collection of react-tailwind components
Hi, can you give me your opinion about this project? What else I should add?
- pastacacioepepe 3y agoLooks great. Maybe a switch component?
- samke- 3y agosure why not
- threatofrain 3y agoHow about a textarea component that expands as needed to fit the content?
- kevinsync 3y agoIt would be far more brutal to just limit all textareas to 30 characters and let the user suffer.
- frereubu 3y agoI 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".
- deleted 3y ago[deleted]
- troupo 3y agoThis 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-textareas/ https://css-tricks.com/the-cleanest-trick-for-autogrowing-te... You might have to figure out how to properly set it up in React
- wbobeirne 3y agoLooks 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.
- paradox460 3y agoThat'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
- likeclockwork 3y agoYou're out here telling lies: https://tailwindcss.com/docs/customizing-colors#adding-additional-colors 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.
- paradox460 3y agoUnless 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
- lagniappe 3y agoI'm probably not the target market for this, but my first observation is that this reminds me of dev.to's visual aesthetic
- troupo 3y agoThis reminds me of gov.uk esthetic a bit, especially when it comes to buttons: https://design-system.service.gov.uk/components/button/ https://design-system.service.gov.uk/components/button/
- latchkey 3y agoEverything looks like a button.
- throwaway-42808 3y agoDesign 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)
- samke- 3y agoI will fix it, thanks.
- darekkay 3y agoAs 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. [1] https://darekkay.com/blog/accessible-ui-frameworks/ https://darekkay.com/blog/accessible-ui-frameworks/
- tehlike 3y agoThis is great. Just yesterday, i was looking for something like this, and found: https://themeforest.net/item/bruddle-neo-brutalism-ui-kit-for-saas-apps/45507215 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.
- samke- 3y agoThank you!
- game_the0ry 3y agoGood 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.
- rendall 3y agoI 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.
- seabass-labrax 3y agoBrutalism 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.
- PhasmaFelis 3y agoI 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.
- deleted 3y ago[deleted]
- earthboundkid 3y agoThe border radii don’t quite fit together, and you can easily see the gaps on an iPad.
- seabass-labrax 3y agoIt 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!
- samke- 3y agoI 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 :)
- samke- 3y agoCan you tell me the exact device you're using, the browser and its version? Thank you.
- earthboundkid 3y agoAn iPad with iOS 17.
- earthboundkid 3y agoThe button doesn’t have type=button, ffs.
- samke- 3y agoThanks for letting me know, I didn't even notice that lol. I will fix it.
- omneity 3y agoNice touch with the marquee component! Maybe as an addition you could introduce animations with jagged easings such as slide in, spring ... DHTML style.
- pmkelly4444 3y agolove this! will use for personal site
- samke- 3y agoty
- pie_flavor 3y agoIt's rather hard to figure out the difference between interactable and non-interactable elements - buttons have the same drop-shadow as badges.
- d--b 3y agoCongrats 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”.
- tz18 3y ago"ugly" is not an aesthetic
- evan_ 3y agoof course it is
- cgio 3y agougly 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.
- mock-possum 3y agoWhat a ridiculously inaccurate thing to say
- ChrisArchitect 3y agoTo 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? - https://news.ycombinator.com/item?id=33692410 https://news.ycombinator.com/item?id=33692410
- DangitBobby 3y agoI like it, and in this scenario I'd be a user.
- knallfrosch 3y agoCool look. However, buttons don't become "unpressed" on Firefox Android after touching them. They never get their shadow back.
- samke- 3y agoHi, can you tell me which device you're using as well as the browser version, ty.
- knallfrosch 3y agoHuawei P30, Firefox for Android 118.1.1
- specialist 3y agoLove 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.)
- samke- 3y agoThanks. 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.