Integrations

Integrate Mavka with popular frameworks, tools, and design platforms.

Next.js Integration

Set up a Next.js project with Mavka in seconds. Our Next.js starter kit includes providers, routing, and everything you need to get started.

Installation

The easiest way to get started with Mavka in a Next.js project is to use our CLI:

Initialize a new Next.js project with Mavka

Using our CLI, you can initialize a new Next.js project with Mavka with the following command:

npx mavka@latest init --nextjs

While running the command, you’ll be asked a few questions to set up your project:

? What is your project named? › mavka-app
? Which color would you like to use as the brand color? ›
❯   brand
    error
    warning
    success
  ↓ gray-neutral

This will create a new Next.js project in the mavka-app directory with all the necessary configurations.

Run the development server

Navigate to your project directory and start the development server:

cd mavka-app
npm run dev

Your Mavka Next.js project is now running at http://localhost:3000.

Manual Setup

If you have an existing Next.js project and want to add Mavka manually, follow our Installation guide.

Vite Integration

Quickly integrate Mavka into your Vite-powered React applications for a fast and modern development experience.

Installation

Initialize a new Vite project with Mavka using our CLI:

Initialize a new Vite project with Mavka

Run the following command to scaffold a new Vite project:

npx mavka@latest init --vite

Follow the prompts to name your project and select your brand color.

Start developing

cd my-mavka-vite-app
npm run dev

Configuration

Ensure your tailwind.config.mjs is set up to include Mavka’s theme and components. Refer to the CLI guide for more details on how the CLI handles this automatically.

v0 Integration

v0 integration coming soon

We are currently waiting for v0 to support Tailwind CSS v4.1.

Claude Code Integration

Prerequisites

In order to quickly kickstart your project with Mavka and Claude Code, you need to have Claude Code installed in your machine. Please refer to the Claude Code documentation to install it if you haven’t already.

Start using Mavka with Claude

We have prepared starter kits that you can use with Claude Code so that you can get started with Mavka in seconds. First, choose your framework:

Next.js starter kit – Mavka

Click to open Next.js starter kit.

Vite starter kit – Mavka

Click to open Vite starter kit.

Then, clone the chosen starter kit in your local machine: Once you have the starter kit in your local machine, you can start using Mavka with Claude Code by just running the following command in the project directory:

claude

And now you should be able to freely prompt Claude Code to continue developing your project.

CLAUDE.md instructions

Our starter kits include a CLAUDE.md file that provides Claude Code with context about the Mavka component library. This file is automatically read by Claude Code when you start a session. If you want to add Mavka instructions to an existing project, download the AGENT.md file and save it as CLAUDE.md in your project root:

curl -o CLAUDE.md https://www.mavka.com/react/AGENT.md

Or download it manually: AGENT.md

MCP integration

Looking to connect Claude Code to the Mavka component library via MCP (Model Context Protocol)? Check out our MCP integration guide for setup instructions.

Gemini Integration

Prerequisites

In order to quickly kickstart your project with Mavka and Gemini, you need to have Gemini CLI installed in your machine. Please refer to the Gemini CLI documentation to install it if you haven’t already.

Start using Mavka with Gemini

We have prepared starter kits that you can use with Gemini CLI so that you can get started with Mavka in seconds. First, choose your framework:

Next.js starter kit – Mavka

Click to open Next.js starter kit.

Vite starter kit – Mavka

Click to open Vite starter kit.

Then, clone the chosen starter kit in your local machine: Once you have the starter kit in your local machine, you can start using Mavka with Gemini CLI by just running the following command in the project directory:

gemini

And now you should be able to freely prompt Gemini to continue developing your project.

GEMINI.md instructions

Our starter kits include a GEMINI.md file that provides Gemini CLI with context about the Mavka component library. This file is automatically read by Gemini CLI when you start a session. If you want to add Mavka instructions to an existing project, download the AGENT.md file and save it as GEMINI.md in your project root:

curl -o GEMINI.md https://www.mavka.com/react/AGENT.md

Or download it manually: AGENT.md

MCP integration

Looking to connect Gemini CLI to the Mavka component library via MCP (Model Context Protocol)? Check out our MCP integration guide for setup instructions.

MCP (Model Context Protocol) Integration

Overview

The Mavka MCP server enables AI assistants like Claude Code and Cursor to directly access our component library. Instead of copying and pasting components manually, your AI assistant can browse, search, and install components for you using natural language.

What you can do

Ask Claude to “add a button component to my project”
Request “create a dashboard layout with sidebar navigation”
Get complete page templates: “build a landing page with hero and pricing sections”
Search components: “find components for data visualization”

Prerequisites

Before integrating the MCP server, ensure you have:

Claude Code, Cursor, Codex, Gemini CLI, or OpenCode installed
A project initialized with the Mavka CLI (npx mavka init)
Node.js 18+ installed

Note: Free components work without a need for authentication. For PRO components, you’ll need a Mavka PRO subscription.

How it works

The MCP server helps your AI assistant discover and install components:

You ask for a component or page template in natural language
AI searches the Mavka library using MCP tools
AI receives a CLI command to install the component
AI runs the command in your terminal
Component is installed with all dependencies automatically

This approach saves tokens and ensures components are installed correctly with proper dependencies and file structure.

Authentication options

The Mavka MCP server supports three authentication methods:

Option 1: OAuth (recommended)

Our MCP server supports OAuth 2.1 with PKCE for secure authentication. MCP clients that support OAuth (like Claude Code) will automatically handle the login flow.

claude mcp add mavka --transport http https://www.mavka.com/react/api/mcp

When using OAuth:

Add the MCP server without any authentication headers
When you access PRO components, you’ll be prompted to log in via browser
After authentication, your session persists automatically

This is the recommended approach as it:

Doesn’t require managing API keys
Automatically refreshes your session
Works seamlessly with Claude Code’s OAuth support

Option 2: API key header

For clients that don’t support OAuth, you can use your API key directly:

claude mcp add --transport http mavka https://www.mavka.com/react/api/mcp --header "Authorization: Bearer YOUR_API_KEY"

Replace YOUR_API_KEY with your actual API key.

Option 3: No authentication (free components only)

For free components only, no authentication is required:

claude mcp add --transport http mavka https://www.mavka.com/react/api/mcp

Integration setup

Choose your AI assistant below and follow the steps to connect the Mavka MCP server.

Available tools

The MCP server provides six tools for component management:

Search and discovery

list_components - Browse components by category

"List all base components"
"Show me marketing components"
"What dashboard components are available?"

Parameters:

category - Filter by category: base, application, marketing, foundations, shared-assets, examples
skip - Number of components to skip for pagination (default: 0)
limit - Maximum number of components to return (default: 100)
key - API key for authentication

The response includes total, skip, limit, and has_more fields for pagination. For example, to get the second page: list_components({ skip: 100, limit: 100 }). search_components - Search by functionality

"Find components for forms"
"Search for data visualization components"
"Show me components with navigation"

Parameters:

query - Search query (required)
category_filter - Optional category filter
limit - Maximum number of results (default: 20)
key - API key for authentication

Component installation

get_component - Get and install a single component

"Add the Button component to my project"
"Install the Modal component"

get_component_bundle - Install multiple components at once

"Add Button, Modal, and Form components"
"Install all components I need for a contact form"

Page templates

get_page_templates - Browse available page templates (PRO only)

"Show me all landing page templates"
"List dashboard templates with sidebar layout"
"What marketing page templates are available?"

get_page_template_files - Install a complete page template (PRO only)

"Install the landing page template 01"
"Add the dashboard template to my project"

Example workflows

Building a dashboard

User: "I need to build a dashboard with sidebar navigation and a data table"

AI Assistant: Let me find the right template for you.
[Searches for dashboard templates]
[Finds dashboards-01 with sidebar layout]
[Runs: npx mavka@latest example dashboards-01/01 --yes]
[Dashboard installed with all components and dependencies]

Adding components

User: "Add a pricing section to my landing page"

AI Assistant: I'll add a pricing component for you.
[Searches for pricing components]
[Finds pricing-section-01]
[Runs: npx mavka@latest add pricing-section-01 --yes]
[Component installed with proper imports]

Component discovery

User: "What components do you have for handling user input?"

AI Assistant: Let me search the Mavka library.
[Searches with query "input"]
[Lists: input, form, checkbox, radio, select, textarea, etc.]
[Shows descriptions and access levels for each]

Free vs PRO

Free components (no API key required)

Core base UI components (buttons, inputs, forms, select, etc.)
Core application components (date picker, table, charts, etc.)
Foundation components (icons, logos)

PRO components (API key required)

Advanced marketing sections (hero, testimonials, pricing, CTA, etc.)
Application components (modals, slideout menus, command menus, etc.)
All page templates and examples (dashboards, landing pages, etc.)
Shared assets (login, signup, 404 pages, etc.)
All component variants

With a valid API key, all components are returned. Without a key, only free components are shown. Each component in the response includes an access field ("public" or "pro") so you can see what’s available.

Resources

The MCP server also provides browseable resources:

mavka://components - Browse all components
mavka://components/base - Core UI components
mavka://components/application - Complex app components
mavka://components/marketing - Marketing sections
mavka://templates - Complete page templates
mavka://examples - Usage examples and patterns

Troubleshooting

MCP server not connecting

Verify your configuration syntax
Check that the URL is correct: https://www.mavka.com/react/api/mcp

Try removing and re-adding the MCP:

claude mcp remove mavka
claude mcp add --transport http mavka https://www.mavka.com/react/api/mcp

CLI command fails

If the AI runs a CLI command that fails:

Ensure you’ve initialized Mavka: npx mavka init
Check that you’re in the correct project directory
Verify Node.js 18+ is installed

PRO access denied

{
  "error": "PRO access required for this component"
}

Add your API key to the MCP configuration or use OAuth
Verify your API key is valid
Ensure your subscription includes access to React PRO components

Component not found

Check the component name is correct (use search_components to find it)
Some components may have specific names like hero-simple-text-01

Need help? Check our GitHub repository for examples, or open an issue if you run into any problems. Our community is here to help!

Design Tools

Figma

Mavka is built on a pixel-perfect Figma design system. You can find our official Figma kit to align your designs with your code.

Figma Design System

Get the official Mavka Figma UI kit and start designing.

FAQ

Does Mavka support Next.js App Router?

Yes, Mavka fully supports the Next.js App Router and Server Components.

Can I use Mavka with other frameworks?

While we provide official support for Next.js and Vite, Mavka is compatible with any framework that supports React and Tailwind CSS.

​Integrations

​Next.js Integration

​Installation

​Manual Setup

​Vite Integration

​Installation

​Configuration

​v0 Integration

​Claude Code Integration

​Prerequisites

​Start using Mavka with Claude

Next.js starter kit – Mavka

Vite starter kit – Mavka

​CLAUDE.md instructions

​MCP integration

​Gemini Integration

​Prerequisites

​Start using Mavka with Gemini

Next.js starter kit – Mavka

Vite starter kit – Mavka

​GEMINI.md instructions

​MCP integration

​MCP (Model Context Protocol) Integration

​Overview

​What you can do

​Prerequisites

​How it works

​Authentication options

​Option 1: OAuth (recommended)

​Option 2: API key header

​Option 3: No authentication (free components only)

​Integration setup

​Available tools

​Search and discovery

​Component installation

​Page templates

​Example workflows

​Building a dashboard

​Adding components

​Component discovery

​Free vs PRO

​Free components (no API key required)

​PRO components (API key required)

​Resources

​Troubleshooting

​MCP server not connecting

​CLI command fails

​PRO access denied

​Component not found

​Design Tools

​Figma

Figma Design System

​FAQ

Integrations

Next.js Integration

Installation

Manual Setup

Vite Integration

Installation

Configuration

v0 Integration

Claude Code Integration

Prerequisites

Start using Mavka with Claude

CLAUDE.md instructions

MCP integration

Gemini Integration

Prerequisites

Start using Mavka with Gemini

GEMINI.md instructions

MCP integration

MCP (Model Context Protocol) Integration

Overview

What you can do

Prerequisites

How it works

Authentication options

Option 1: OAuth (recommended)

Option 2: API key header

Option 3: No authentication (free components only)

Integration setup

Available tools

Search and discovery

Component installation

Page templates

Example workflows

Building a dashboard

Adding components

Component discovery

Free vs PRO

Free components (no API key required)

PRO components (API key required)

Resources

Troubleshooting

MCP server not connecting

CLI command fails

PRO access denied

Component not found

Design Tools

Figma

FAQ