Design Kit Components
Component docs for the MetalHatsCats Neubrutalism Design Kit. Practical usage notes, imports, and patterns.
NBCard
Base container with border + shadow for most panels.
NBButton
Primary/secondary actions with neo-brutal weight.
NBCTA
CTA block with eyebrow + primary/secondary actions.
NBCodeBlock
Copy-friendly code snippets for docs and guides.
NBTable / ComparisonTable
Readable tables for specs and plan comparisons.
FAQAccordion
Accordion FAQ block with good scanability.
NBTableOfContents
Auto-generated TOC for long pages (h2-based).
NBBreadcrumbs
Breadcrumbs for deep folder hierarchies.
NBChip
Small taxonomy tags and inline states.
NBPreviewCard
Promotional card highlighting features or apps.
NBLink
High-contrast, heavy-bordered inline or block link with an arrow icon.
NBFrameBox
Offset and bracket-style container frames.
NBChecklist
Neo-brutalist interactive checklist with strikethrough and accent colors.
NBFeatures
Heavy-bordered feature grid with keyword highlighting.
HeroArticle
Bold article header block with heavy drop shadow.
NBCTA
High-impact Call To Action section with heavy offset shadows.
NBCodeBlock
Code snippet block featuring colored Neobrutalist shadows and a built-in copy function.
NBTable
Data table with thick cell borders and a massive 12px double-layered shadow slab.
NBQuote
Blockquote component with a colored Neobrutalist header bar and tinted background.
NBBioCard
Author/Person bio card supporting JSON-LD, social links, and a tilted sticker label.
NBOffsetPanel
Playful container box with bracket-style offset borders and a slight tilt.
NBStepper2
Vertical step-by-step numbered list connected by a thick black rail line.
NBMermaid
Mermaid diagram wrapper styled with MetalHatsCats theme vars for native Neobrutalist flowcharts.
NBProductPricingPackage
Heavy-duty pricing card with massive slanted 12px drop shadow and accent tags.
FAQAccordion
Accordion list with heavy border separators and bold typography for Q&A.
NBHypothesis
Experiment tracking card with status chips and heavy 10px shadows.
QuickAnswerBlock
Highlighted summary block designed for SEO snippets with thick borders.
NBProsCons
Two-panel pros and cons list built on top of standard NBCards.
NBCardSection
Responsive grid layout for linking to hub articles using massive arrow-up-right icons.
NBPromoCardLink
Loud, high-impact CTA tile with background patterns (stripes/dots) and large SVG icons.
NBPostMeta
Standardized article metadata header indicating publication dates and authorship.
NBBioTeam
Structured author attribution block injecting standard Schema.org Person/Organization JSON-LD.
TwoColFeatureList
Side-by-side comparison block with a primary media tile on the left and a heavy bullet list on the right.
QAItem
A stylized question and answer block utilizing thick colored rail borders instead of standard accordion toggles.
Marquee
Infinite scrolling text banner built with CSS animations on Neobrutalist chips.
NBArticleActions
Interactive article footer widget with deterministic like counter and social share buttons.