mapcn

Integrate Mapcn components into React and shadcn projects for interactive maps.

39|2|Updated Feb 17, 2026

Search Tags:#ui #integration #react #map #maplibre #mapcn

Ready to run

npx skills add https://github.com/ferminrp/agent-skills --skill mapcn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mapcn
Source: https://github.com/ferminrp/agent-skills/tree/main/skills/mapcn
Command: npx skills add https://github.com/ferminrp/agent-skills --skill mapcn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

mapcn provides ready-to-use map components built on MapLibre for React + shadcn UI, simplifying integration, state management, and map controls.

Core Features & Use Cases

Install and integrate core components like Map, MapControls, and Map markers.
Manage controlled viewport state with useMap and related hooks for dynamic apps.
Build interactive map UIs with markers, routes, and clusters in real projects.

Quick Start

Install mapcn in your project and bootstrap a basic map with Map, MapControls, and a simple MapMarker.

Frequently Asked Questions about mapcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I integrate interactive maps into a React and shadcn UI project?▼

You can integrate interactive maps into a React and shadcn UI project using mapcn, which provides ready-to-use components built on MapLibre. It simplifies rendering maps with controls and markers without complex configuration.

What is the best way to manage controlled viewport state for MapLibre maps in React?▼

The best way to manage controlled viewport state for MapLibre maps in React is by using the useMap hook provided by mapcn, which enables dynamic viewport updates and state management for interactive applications.

Can I add markers and map controls to a MapLibre map with shadcn components?▼

Yes, you can add markers and map controls to a MapLibre map using mapcn. The library provides MapControls and MapMarker components that integrate directly into your shadcn UI project.

Does mapcn work without any additional external dependencies?▼

Yes, mapcn works without additional external dependencies listed in its configuration, providing a self-contained Skill unit with frontmatter entry points, usage guidance, and reference materials for installation and troubleshooting.

How do I troubleshoot map rendering issues in a React shadcn application?▼

To troubleshoot map rendering issues in a React shadcn application, consult the mapcn reference materials which cover installation, configuration, and troubleshooting steps for MapLibre components in real-world apps.