Neobrutalism Components MCP Server

🚀 The fastest way to integrate neobrutalism components into your AI workflow

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to neobrutalism components - a collection of neobrutalism-styled React components that work with Next.js, Vite, and other React frameworks.

✨ Key Features

• 🎯 Neobrutalism Design - Bold, stark, and brutalist-inspired UI components

• 📦 Component Source Code - Latest TypeScript source code from the registry

• 🎨 Component Demos - Example implementations and usage patterns

• ⭐ Stars Components - 40 unique star/decoration components (s1-s40)

• 📋 Metadata Access - Dependencies, descriptions, and configuration details

• 🔍 Directory Browsing - Explore repository structures

• ⚡ Local Components - All components included locally, no external dependencies

Related MCP server: 21st.dev Magic AI Agent

🚀 Quick Start

For Claude Code

claude mcp add neobrutalism -- npx -y neobrutalism-mcp-server

For Cursor and Other AI Tools

# Simple usage!
npx neobrutalism-mcp-server

🎯 All components included locally!

🖼️ What You Can Build

This entire React interface was generated with Claude Code using this MCP server in just one prompt!

🎨 Component Categories

This server gives you access to cool neobrutalism components organized in different groups:

🛠️ Setup

For Claude Code Users

claude mcp add neobrutalism -- npx -y neobrutalism-mcp-server

For Other AI Tools

First run the server:

npx neobrutalism-mcp-server

Then add this to your AI tool's config:

{
  "mcpServers": {
    "neobrutalism": {
      "command": "npx",
      "args": ["neobrutalism-mcp-server"]
    }
  }
}

🎯 What You Can Do

• Build Cool React UIs - Let AI help you make React websites with neobrutalism style (not HTML pages)

• Find Components - See what React components are available and how to use them

• Make Prototypes Fast - Get working React component code quickly

• Create Design Systems - Build consistent brutalist-style React designs

• Generate Code - Get React component code with all the right dependencies

📦 Available Tools

This server gives AI tools these helpful functions:

• list_components - Get all available neobrutalism components

• get_component - Get source code for a specific component

• get_component_demo - Get demo/example usage for a component

• get_component_metadata - Get metadata (dependencies, type, etc.)

• get_directory_structure - Browse the repository structure

🎨 Component Examples

React UI Components

• button - Neobrutalism-styled React button components

• card - Container React components with bold borders

• dialog - Modal React dialog components with stark styling

• input - Form input React components

React Star Components

• s1 to s40 - Decorative star and ornamental React components

• Each with unique neobrutalism styling

📦 Installation

# Install globally (optional)
npm install -g neobrutalism-mcp-server

# Or use npx directly (recommended)
npx neobrutalism-mcp-server

# Or install locally in a project
npm install neobrutalism-mcp-server

🔗 Repository

This server includes components from https://www.neobrutalism.dev/ and the ekmas/neobrutalism-components repository.

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

• ekmas - For the amazing neobrutalism components library

• shadcn - For the foundational shadcn/ui architecture

• Anthropic - For the Model Context Protocol specification

Made by https://github.com/dennisimoo

Star ⭐ this repo if you find it helpful!