import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.LLMDocumentation);

Mantine with LLMs

Mantine provides LLM-friendly documentation to help AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude understand and work with the Mantine UI library.

llms.txt documentation is updated with every Mantine release.

Documentation

Links:

• llms.txt – compact
• Download full documentation in single document (~1.8MB)

The LLM documentation includes:

• Getting Started - Installation and setup guides
• Components - All Mantine components with props, examples, and usage
• Hooks - Complete hooks documentation with examples
• Theming - Theme customization and MantineProvider setup
• Styles - CSS modules, CSS variables, and styling approaches
• Frequently Asked Questions - Common questions and solutions

Cursor

In Cursor, you can reference the documentation using the @Docs feature:

1. Type @Docs in your prompt
2. Reference the Mantine documentation URL: https://mantine.dev/llms.txt
3. Ask questions about Mantine components, styling, or implementation

Windsurf

For Windsurf users:

1. Reference the documentation using @https://mantine.dev/llms.txt
2. Or add it to your .windsurfrules file for persistent access

ChatGPT and Claude

When using ChatGPT or Claude:

1. Mention that you're using Mantine v8
2. Reference the documentation URL: https://mantine.dev/llms.txt
3. The AI will fetch and use the documentation to provide accurate answers

GitHub Copilot

While Copilot doesn't directly support external documentation, you can:

1. Include relevant documentation snippets in your comments
2. Reference component names and props accurately for better suggestions

Skills

Mantine also provides skills for AI coding agents in the mantinedev/skills repository.

Currently available skills:

• mantine-combobox – Build custom select/autocomplete/multiselect components with Combobox
• mantine-form – Build forms with @mantine/form, validation, nested fields, and form context
• mantine-custom-components – Create custom components with Mantine factory APIs and Styles API

Install skills

Install each skill from the repository:

npx skills add https://github.com/mantinedev/skills --skill mantine-combobox
npx skills add https://github.com/mantinedev/skills --skill mantine-form
npx skills add https://github.com/mantinedev/skills --skill mantine-custom-components

Use skills

In your AI prompt, explicitly tell the agent to use one of the installed skills.

Examples:

• "Use $mantine-form and build a profile form with validation and nested fields"
• "Use $mantine-combobox and create a searchable multi-select with custom option rendering"
• "Use $mantine-custom-components and scaffold a polymorphic component with Styles API support"

If your agent does not support $skill-name mentions, reference the skill name in plain text and ask the agent to follow it.

MCP server (experimental)

Mantine also provides an MCP server package:

• @mantine/mcp-server

The server reads Mantine static MCP data published on mantine.dev and exposes tools that AI agents can call directly:

• list_items
• get_item_doc
• get_item_props
• search_docs

MCP server configuration

Most MCP-compatible tools support adding servers with a JSON configuration. Use this server definition:

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "@mantine/mcp-server"]
    }
  }
}

To use a different data source (for example, alpha docs or local static files), add env variables:

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "@mantine/mcp-server"],
      "env": {
        "MANTINE_MCP_DATA_URL": "https://mantine.dev/mcp"
      }
    }
  }
}

Using MCP server with different tools

Claude Desktop

1. Open MCP settings in Claude Desktop
2. Add the mantine server configuration above
3. Start a new chat and ask for Mantine guidance, for example: "Find Button props and give me a usage example"

Cursor

1. Open Cursor MCP/server settings
2. Add the same mantine server config
3. Use agent mode and ask Mantine-specific questions – Cursor will call MCP tools automatically

Windsurf

1. Open Windsurf MCP/server settings
2. Register @mantine/mcp-server with the same config
3. Ask for component docs, props, and examples directly in chat

Other MCP clients (VS Code/Cline and others)

If the client supports custom MCP servers, add the same command and args:

• command: npx
• args: ["-y", "@mantine/mcp-server"]

Then use prompts like:

• "List Mantine items related to input fields"
• "Get full docs for Button"
• "Search Mantine docs for color scheme and dark mode"

Example prompts

Here are some example prompts you can use with AI tools:

• "Using Mantine v8, how do I create a dark mode toggle?"
• "Show me how to use the AppShell component with a collapsible navbar"
• "How can I customize the theme colors in MantineProvider?"
• "Create a form with validation using Mantine's form hooks"
• "How to align input with a button in a flex container?"

Documentation Generation

The LLM documentation is automatically generated from our source files using a compilation script. It includes:

• Component documentation from MDX files
• Props tables and types
• Code examples and demos
• Styles API documentation
• FAQ content from help.mantine.dev

There are two generated formats:

• llms.txt – the default compact index that links to per-page .md files under the /llms path
• llms-full.txt – a single large file with all documentation content

To ensure you have the latest documentation, we regenerate these files with each release. The files follow the LLMs.txt standard for better compatibility with AI tools.

Contributing

If you find any issues with the LLM documentation or have suggestions for improvement, please open an issue on our GitHub repository.