Atomic Design
Tokens first development.
NeubrutalismTokensComponentsDark Theme
Neubrutalism UI Kit for Next.js
Neubrutalism design system and Next.js UI kit with reusable components, design tokens, live docs, and SEO-safe markup for fast product shipping.
Version: v0.3.0 · Last updated:
What this is
A kit we actually use
This isn’t a “gallery of random components”. It’s the small set of primitives and patterns that power MetalHatsCats pages, kept consistent as datasets and programmatic routes scale.
Built for SEO surfaces
The kit is designed to be metadata-safe and JSON-LD friendly: predictable headings, clean markup, and multi-domain-safe URL building.
Component Showcase
A live preview of the complete MetalHatsCats Design Kit inventory. Every component here is exactly what you get.
Containers & Cards
NBCard Default
The base container with hard shadow and border.
NBFrameBox
An offset bracket-style frame for highlighting important notes or features.NBOffsetPanel: Playful tilted box.
NBPromoCardLink
Actions & Buttons
Content Elements
HeroArticle
The bold top-level header for articles.
"Neubrutalism is the rejection of the polished, the glossy, and the safe."
const theme = "neubrutalism";
console.log(`Shipping ${theme}...`);Quick answer
What is QuickAnswerBlock?
A summary block designed for SEO snippets and immediate TLDR answers.
Data & Lists
| Design Token | Value |
|---|---|
| --mhc-border | 4px |
| --mhc-radius | 14px |
| Plan | Basic | ProBest | Ultra |
|---|---|---|---|
| Borders | ✓ | ✓ | ✓ |
| Shadows | Small | Massive | Custom |
| Support | 24/7 | Dedicated |
Define
Set your design tokens.
Compose
Build layouts with cards.
Iterate
Refine patterns.
SEO Optimized
Built mapping to JSON-LD.
Dark First
Perfectly balanced contrast.
TwoColFeatureList
When to use: Comparing two distinct options or showing a high-level feature overview.
Dark Mode Ready
Every component is built with perfectly balanced contrast for both light and dark themes.
Key Benefits
- Eye strain reduction
- Battery saving
- Automated theme switching via OS preference
- Crisp boundaries
Specialty Items
NEUBRUTALISMDESIGN KITMETALHATSCATSREACTNEXT.JSTAILWIND CSSNEUBRUTALISMDESIGN KITMETALHATSCATSREACTNEXT.JSTAILWIND CSS
Popular
MHC Kit Pro
Access all components and future updates.
$59
Buy Now✍️About the Author
MetalHatsCats
Architect
Creating the neubrutalist web one pixel at a time.
Pros
- Fast rendering
- Strong identity
- SEO structures
Cons
- Bold aesthetic
- Higher visual weight
Bold headers improve user retention by 15%.
- Confidence
- 85%
- Metric
- Retention
Why neubrutalism?
Because the web deserves a bit of fun. Flat design is everywhere. We want our UI to feel tactile.
Published By MHC Team
Prepared by the Team
Component Creators
Team
Design Kit
Design Kit Team
Est. 2026
Built by developers for developers.
Navigation
NBTableOfContents
Automatically scans headings on the page.
People also ask
Is it a finished product I can buy today?
Not yet. Right now it’s a living kit inside MetalHatsCats: we build real pages first, then harden patterns into reusable components. A sellable “exportable kit” (license + versioning + docs) is planned.
Where are the docs?
See /design-kit for the token list and component docs.
Is it multi-domain safe?
Yes: canonical/OG and JSON-LD URLs should be derived from an env-based base URL (via getSiteUrl()) rather than hardcoding domains.