Neubrutalism UI Kit
A production‑ready component kit to build bold product pages and catalogs. The sample copy and images use a coffee machine context so you can immediately see how tables, cards, pricing, FAQs, and CTAs work for real products.
- What it is: a hand‑crafted set of React components with neo‑brutal tokens for borders, shadows, and highlights.
- What it includes: cards, preview grids, pricing, FAQ, tables, breadcrumbs, bio/authority, CTA, icons, stepper, quiz, code blocks, and more.
- Who it's for: teams shipping product pages, template marketplaces, and SaaS landing pages that need speed and personality.
Table of Contents
When to use: Add a TOC for long docs or marketing pages with many h2 and h3 sections. It reduces scroll fatigue and helps users jump to what matters.
Cards Gallery
When to use: preview cards are for showcasing products, features, or articles in a grid. Ideal for home / collection pages where users scan quickly. The entire card is clickable, so keep copy short (1–2 lines) and add 2–4 chips for fast context.
Blog Hero
Coffee Machine Finder
Compare espresso, drip, and pod machines — pick the right brewer for your routine.
2-Cols List
When to use: Use a side‑by‑side layout: demo the brew on the left and list buying criteria on the right.
Espresso Shot Demo
Watch a 25–30s extraction with stable pressure and 1:2 ratio.
What to Check
- Temperature stability (PID)
- Pressure profile (9 bar)
- Milk steaming power
Stats / Feature Tiles
When to use: quick, scannable KPIs for landing pages and product overviews. Keep labels short (1–2 words) and format numbers boldly. Use the yellow fill for high visibility and to signal performance.
Testimonials
When to use: social proof for landing pages, pricing, and product sections. Keep each quote short (1–2 lines) with a clear role/title for credibility. Use 3 cards for balance; rotate quotes seasonally.
“Pulled café‑quality shots at home.”
“The layout makes comparing machines easy.”
“Sold more grinders after switching to this page.”
Post Meta
When to use: place above or below article titles to show publish and update dates with author info. Useful for blogs, release notes, and knowledge articles where content freshness and attribution matter.
Pricing
When to use: Pricing grids work best for SaaS, templates, or subscription-based products. Keep tiers to 3–4 for clarity, highlight the most relevant plan with hot: true, and place the price below the features for better scanning.
Home Drip
Starter layout for simple drip brewers.
Espresso Pro
For semi‑auto machines and grinder bundles.
Cafe Team
Multi‑SKU cafe catalog with accessories.
Tables
When to use: use tables for structured, scannable data where users compare rows/columns (plans, features, specs). Keep labels short, freeze the first column on horizontal scroll, and add a caption for context.
Comparison
| Feature | Starter | ProBest | Team |
|---|---|---|---|
| All UI patterns | ✓ | ✓ | ✓ |
| Updates | — | ✓ | ✓ |
| Seats | 1 | 1 | 5 |
| Priority support | — | ✓ | ✓ |
Checklist
When to use: use a checklist to guide setup, onboarding, or buying decisions. Keep items short (max ~10 words) and add a subtle hint line only when needed. Usenumbered for step-by-step flows, or checkmarks for flexible tasks.
Tech Specs
| Spec | Starter | Pro | Team |
|---|---|---|---|
| Max Projects | 1 | Unlimited | Unlimited |
| Seats | 1 | 1 | 5 |
| Support SLA | Community | 24h Email | 24h Email |
| Updates | Manual | Auto | Auto |
- Sticky first column improves scan on overflow; wrap the table in
overflow-x-auto. - Use a short caption for context; keep column labels 1–3 words.
- Use a soft zebra (e.g.,
yellow/20) to help track long rows.
Typography
H2 — Section Title
H3 — Card Title
H4 — Subsection
With Accent Underline
Paragraph Variations
Large body — use for lead paragraphs in heroes or section intros.
Standard body — good for most content. Comfortable line height for long‑form reading.
Muted body — same rhythm with a softer tone for secondary explanations.
Small body — use for captions, helper text, timestamps, or legal notes.
Highlights
Use inline highlights to emphasize key ideas. Our content and products use yellow,lavender, andpink highlights to guide focus and make key ideas pop.
People also ask
Can I use these components for my coffee machine store?
Does it support espresso, drip, and pod machines?
Is dark mode supported?
Is this Next.js‑ready?
Quote
When to use: drop a single strong quote to provide social proof and emotional resonance near key decision points — above pricing, next to a CTA, or after a feature/case study. Keep it short (1–2 lines), attribute with a clear role/title, and rotate quotes periodically.
This design template gave our product a unique and memorable identity.
Stepper
A compact, neo‑brutal vertical stepper you can drop into blueprints and integration guides.
Publish Master Data Event
Event Source (e.g., SAP S/4HANA, ECC, SuccessFactors) emits a Business Object change event via AMQP to SAP Integration Suite, Advanced Event Mesh.
Filter & Route
Advanced Event Mesh filters events and routes them to relevant queues/subscriptions.
Distribute to Consumers
Multiple consumers (SAP S/4HANA Cloud, third‑party, on‑prem S/4HANA) receive and process the event independently.
Stepper
When to use: outline a short process (3–5 steps) for onboarding, setup, or how a feature works. Keep each step title action‑oriented, 2–4 words, with a one‑line description. Use numbers for sequence and align length so all cards scan evenly.
Grind
Set a fine, repeatable grind.
Brew
Aim for a 1:2 ratio in 25–30s.
Steam
Texture milk to 55–60°C.
Coffee Knowledge — Q → A Blocks
When to use: use this pattern to answer common coffee brewing questions, explain espresso vs. drip concepts, or highlight gear differences. Keep the question short (3–7 words) and the answer concise (1–3 sentences). Lead with the takeaway, add a link for more depth if needed, and keep each pair focused on a single idea.
Espresso vs. lungo — what's the difference?
Why does PID matter in machines?
Single vs. dual boiler?
Do I need a good grinder?
Marquee
When to use: continuous scroller for brand themes, categories, partners, or feature tags. Use it to add motion at section breaks or hero footers — keep items short (1–2 words), avoid full sentences, and limit to 6–10 items for readability.
Quiz
When to use: micro‑assessments to boost engagement, validate learning, or qualify leads. Place after tutorials, docs, or feature explainers. Keep it short (3–5 questions), give instant feedback, and track score to suggest next steps.
Coffee Basics Quick Quiz
CTA (Component)
When to use: place a CTA at key decision points — after benefits, pricing, or a strong testimonial. Keep copy outcome‑first (what users get), use a single primary action, and provide a clear secondary path for exploration. Keep it visible above the fold on mobile.
Choose the Right Machine
Use these neo‑brutal patterns with coffee‑themed samples to compare brewers, grinders, and accessories.
Icons — React Icons + Custom
Available (custom)
StarBurstLightningBlockSpiralWavy
Customizations
- Size: for react‑icons use the
sizeprop (e.g.,s) or Tailwindtext-[Npx]. - Color: set with
className(e.g.,text-[var(--mhc-hl-lavender)]ortext-black). - Background chip: wrap the icon in a rounded span with brand tokens (see example).
- Hover motion: add
hover:rotate-1,hover:scale-105to the wrapper for playful feedback. - Accessibility: add an
aria-labelon the wrapper link/button if the icon is the only content.
Authority
Bio
When to use: establish credibility where trust decides conversion — about pages, product pages, long-form posts, and landing sections near pricing/CTAs. Lead with role + niche, add proof (years, certs, logos, notable projects), and link to a primary profile (LinkedIn) for verification. Keep the bio tight (2–3 lines).
Team — Depth & Authority
When to use: show breadth of expertise and execution capacity. Ideal for sales/enterprise pages, proposal microsites, and “about” sections. Include roles, specialties, and one credibility line (clients, talks, awards). Keep it tight — 3–6 people is plenty.
Мы объединяем экспертов в SAP, дизайн-системах и автоматизации, чтобы создавать продукты и контент.
Style Gallery (Demo)
Visual experiments rendered without <h1> to avoid multiple H1s on the page. We keep classes the same and use role="heading" with aria-level=1.
Breadcrumbs
Dynamic path-based breadcrumbs rendered with neo-brutal chips.
When to use: show on multi‑level pages to give location and quick back‑navigation (docs, KB, blogs, shops). Hide on the homepage, don’t duplicate primary nav, and truncate long paths with an ellipsis. Make the current page non‑link, keep labels short (1–2 words), and prefer Title Case.
Mermaid Diagram
When to use: visualize flows, architectures, and decision trees directly in markdown-like syntax. Great for onboarding docs, runbooks, and product explainers. Keep node labels short, prefer left‑to‑right layouts (LR), and add a caption for quick context.
Buttons
NBLink renders rounded neo‑brutalist link buttons with bold borders and an animated arrow. Useaccent to switch color tokens and external for safe new‑tab behavior.
Action Links
Use NBLink for primary/secondary actions that look like buttons but behave like links. Ideal for hero CTAs, header bars, and inline actions where a page transition is expected.
accentchooses the highlight token (e.g.,"pink","lavender").externaladds safe new‑tab behavior (target="_blank"+rel="noopener noreferrer") and shows the external arrow.- Accessible by default — use a clear
aria-labelwhen the link text needs extra context. - Neo‑brutal feel: rounded corners, thick borders, subtle lift on hover, and a bold arrow.
Promo Card (Full‑bleed)
Use a full‑width promo card to break the grid and draw attention to a key action or announcement.
Store Badges
Ship multi-platform apps with bold, branded store badges.
When to use: place badges wherever users decide to install — app landing pages, pricing, or feature sections. Keep them above the fold on mobile, pair with a QR code on desktop, and match platform availability.
- Link each badge to its store page; use official assets and spacing rules.
- Order badges by audience (e.g., App Store first if iOS‑heavy).
- Track clicks per platform to guide roadmap and campaigns.
Code Block
When to use: show setup snippets, API examples, or small how-tos. Keep code short (5–20 lines), add a clear filename in the title, and prefer copy-ready snippets over screenshots. Use one block per idea.
export function Button({ children }: { children: React.ReactNode }) {
return (
<button className="px-4 py-2 border-4 border-black rounded-lg hover:rotate-1 transition-transform">
{children}
</button>
)
}Pros & Cons (Demo)
When to use: quick trade‑off blocks to explain design or architecture choices. Keep lists to 3–5 bullets.
- Fast setup — drop‑in components.
- Great for single‑SKU coffee pages.
- Clear comparison tables for grinders & machines.
- Custom logic needed for advanced filters.
- Requires your product data and images.
- Styling follows neo‑brutal look by default.