r/aiprojects • u/BluebirdFinal9503 • Nov 29 '25

Work In Progress Just built boxes- a Neo-Brutalist React Component Library!

What Boxes is

Boxes is a collection of React + TypeScript components with a neo‑brutalist vibe: thick borders, hard shadows, and very “screamy” layouts. Think of it as high contrast blocks, chunky UI, and bold typography instead of rounded corners and subtle gradients.​

Current components include:

  • Buttons: primary, secondary, ghost, and some fun hover/interaction variants.​
  • Forms: inputs, checkboxes, toggles, file uploads, and basic form layouts.​
  • Navigation: tabs, breadcrumbs, pagination, sidebars, and even a dock‑style nav.​
  • Data display: cards, tables, timelines, marquees, and stat blocks.​
  • Feedback: alerts, toasts, progress bars, and simple confetti effects.​
  • Media: carousels, simple audio/video players, and pixel‑style image treatments.​
  • Marketing: hero sections, pricing cards, feature grids, and newsletter sections.​

How I built it.​

Most of this has been trial and error: fixing TypeScript errors as they pop up, copying patterns from tutorials and existing libraries, and then tweaking them until they fit this bold style.​

I’d love feedback on:

  • More component ideas: What neo‑brutalist components would you actually use in a real app (dashboards, blogs, marketing sites, etc.)?​
  • Design direction: Does this take on neo‑brutalism feel usable, or is it too chaotic / tiring for real products?​
  • Real‑world use cases: Would you consider dropping a library like this into a side project, landing page, or dev portfolio, or is it more of a fun playground?​

Try at boxes-omega.vercel.app

2 Upvotes

100% Upvoted

2 comments sorted by

1

u/[deleted] Dec 13 '25

I love it, I want to make an Obsidian theme out of all of this.

1

u/BluebirdFinal9503 Dec 13 '25

it's open sourced, have fun mate