Magic UI MCP Server

🚀 @magicuidesign/mcp

@magicuidesign/mcp is a toolkit that offers a variety of components and functions, specifically designed to enhance design efficiency. It includes a rich collection of UI components, interactive effects, and design resources, enabling designers to quickly achieve high - quality designs.

🚀 Quick Start

Installation

You can install @magicuidesign/mcp using the following commands:

npm install @magicui-design/mcp

Or install it via yarn:

yarn add @magicui-design/mcp

Usage

Basic Usage

Import MCP into your project and start using it:

import { MagicUI } from '@magicuidesign/mcp';

// Initialize an MCP instance
const magic = new MagicUI();

// Use a certain function
magic.component(componentName).configure(options);

✨ Features

Component Library

@magicuidesign/mcp provides the following components and functions:

UI Components

• Button: Customize button styles with support for various interactive effects.
• Card: A customizable card component suitable for displaying content.
• Dialog: A pop - up dialog box for prompting or confirming operations.
• Tooltip: A tool tip that displays additional information on hover.

Animation and Interaction

• AniList: A list component with animation effects.
• LazyLoad: Lazy - load images to improve performance.
• Swiper: A carousel component that supports gesture sliding.

Other Features

• ThemeSwitcher: A theme switcher for easily implementing dark/light modes.
• IconFont: Integrate icon fonts to enrich your design elements.
• ResponsiveGrid: A responsive grid layout that adapts to different screen sizes.

💻 Usage Examples

import { MagicUI } from '@magicuidesign/mcp';

// Initialize an MCP instance
const magic = new MagicUI();

// Use the Button component
magic.component('Button').configure({
  size: 'large',
  variant: 'primary'
});

// Use the Card component
magic.component('Card').configure({
  padding: '1rem',
  shadow: 'md'
});

📚 Documentation

For detailed documentation and more examples, please refer to the MagicUI official website.

👥 Contributors

Thanks to the following contributors for their contributions to the @magicuidesign/mcp project:

• @beaubhp
• Other anonymous contributors

📄 License

This project is licensed under the MIT License. Please refer to LICENSE.md for the specific license content.

Thank you for your support and usage!