How to Use Monet Components: Two Approaches

Monet is a curated collection of premium React components designed for building stunning landing pages. Whether you're a developer who likes full control or someone who prefers AI-assisted workflows, we've got you covered with two distinct approaches to using our components.

Method 1: Copy & Paste

The traditional approach gives you complete control over the process. Browse, preview, copy, and customize—all at your own pace.

Step 1: Browse Components

Head over to /c to explore our full collection. You can:

• Filter by category: Hero sections, pricing tables, testimonials, footers, and more
• Filter by style: Minimal, gradient, glassmorphism, dark mode optimized
• Search: Find exactly what you need with keyword search

Step 2: Preview in Action

Every component comes with a live preview. See how it looks and behaves before committing:

• Check responsive behavior across screen sizes
• View light and dark mode variants
• Interact with hover states and animations

Step 3: Copy the Code

Found the perfect component? Click the Code tab to reveal the source:

// Example: A simple hero section
export function HeroSection() {
  return (
    <section className="relative overflow-hidden px-6 py-24">
      <h1 className="text-5xl font-bold tracking-tight">Your headline here</h1>
      <p className="mt-6 text-lg text-muted-foreground">
        Your description goes here
      </p>
    </section>
  );
}

One click copies everything to your clipboard.

Step 4: Customize

Paste the code into your project and make it yours:

• Colors: Adjust Tailwind classes to match your brand
• Typography: Change fonts, sizes, and weights
• Spacing: Modify padding and margins
• Content: Replace placeholder text and images

Method 2: AI with MCP

Let AI handle the heavy lifting. Connect Monet to your coding agent via MCP (Model Context Protocol), and the AI will discover, select, and integrate components based on your natural language descriptions.

What is MCP?

MCP (Model Context Protocol) is an open protocol that allows AI assistants to securely connect to external tools and data sources. By connecting Monet via MCP, your AI coding agent gains direct access to our component registry.

Setup Guide

For IDE (Cursor, AntiGravity, ...)

Add the following to your MCP configuration file:

macOS: ~/.cursor/mcp.json (for Cursor)

Windows: %USERPROFILE%\.cursor\mcp.json (for Cursor)

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

After saving, restart your IDE for the changes to take effect.

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"

Getting Your API Key

1. Sign in to Monet
2. Navigate to the MCP page
3. Generate your personal API key
4. Copy and add it to your configuration

Example Prompts

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

• "Find a hero section with gradient background and floating elements"
• "I need a pricing table component for a SaaS product with three tiers"
• "Show me testimonial sections with carousel animation"
• "Add a modern footer with newsletter signup and social links"

The AI will search our registry, present matching options, and help integrate the code into your project.

Which Method Should You Choose?

Situation	Recommended Method
You know exactly which component you need	Copy & Paste
Not sure what component fits your needs	AI with MCP
Quick grab of a single component	Copy & Paste
Building multiple sections at once	AI with MCP
Want to review code before adding	Copy & Paste
Prefer conversational development flow	AI with MCP
Learning how components are built	Copy & Paste
Want AI to adapt components to your style	AI with MCP

Best Practices

For Copy & Paste Users

1. Check dependencies: Some components require additional packages like framer-motion or lucide-react
2. Review Tailwind config: Ensure your project has the necessary Tailwind plugins and theme extensions
3. Test responsiveness: Always verify the component looks good on mobile, tablet, and desktop

For MCP Users

1. Be specific: The more detailed your description, the better the AI can match components
2. Iterate: Start with a basic request, then refine based on what you see
3. Combine components: Ask the AI to help you combine multiple components for a cohesive design

Get Started

Ready to build something beautiful?

• Browse Components: /c
• Set Up MCP: /mcp
• Full Guide: /guide

Whether you copy code or let AI do the work, every Monet component is designed to impress. Happy building!