Getting Started with Monet UI Components

Welcome to Monet! This guide will help you get started with using our beautiful, production-ready React components in your Next.js project.

What is Monet?

Monet is a curated collection of high-quality React UI components that you can easily copy and paste into your projects. Unlike traditional component libraries, Monet gives you full ownership of the code - no package dependencies to manage or version conflicts to worry about.

Prerequisites

Before you begin, make sure you have:

• Node.js 18+ installed
• A Next.js project (v14+ recommended)
• Tailwind CSS configured
• Basic knowledge of React and TypeScript

Quick Start

Step 1: Browse Components

Visit our component gallery to explore the available components. Each component comes with:

• Live preview
• Source code
• Usage examples
• Customization options

Step 2: Copy the Code

When you find a component you like, simply click the copy button to grab the source code. The code is designed to be self-contained and easy to integrate.

Step 3: Paste and Customize

Paste the component into your project and customize it to match your design system. All components use Tailwind CSS, making customization straightforward.

Alternative: AI-Powered Workflow with MCP

If you prefer an AI-assisted workflow, you can connect Monet to your coding agent via MCP (Model Context Protocol). This allows AI to discover, select, and integrate components based on natural language descriptions.

Setting Up MCP

For IDE (Cursor, AntiGravity, ...)

Add the following to your MCP configuration file (~/.cursor/mcp.json for Cursor):

{
  "mcpServers": {
    "monet-mcp": {
      "url": "https://www.monet.design/api/remote/mcp",
      "headers": {
        "Authorization": "Bearer your-api-key-here"
      }
    }
  }
}

For Claude Code

Run the following command in your terminal:

claude mcp add --transport http monet-mcp https://www.monet.design/api/remote/mcp --header "Authorization: Bearer your-api-key-here"

Get your API key from the MCP page.

Using MCP

Once configured, you can use natural language to find and integrate components:

• "Find a hero section with gradient background"
• "I need a pricing table for a SaaS product"
• "Add a testimonial carousel component"

The AI will search our registry and help integrate the code directly into your project.

For a complete guide, check out How to Use Monet Components.

Best Practices

Here are some tips for getting the most out of Monet:

1. Keep components organized - Create a dedicated components/ui folder for your copied components
2. Maintain consistency - Use your design tokens (colors, spacing, etc.) consistently
3. Test responsiveness - All our components are mobile-first, but always test on your target devices
4. Update as needed - Since you own the code, feel free to modify components to fit your needs

What's Next?

Now that you know the basics, here are some next steps:

• Explore our component categories
• Check out complete page templates
• Set up MCP integration for AI-powered workflows
• Read How to Use Monet Components for detailed usage guide

Happy building!