shadcn maps

Overview

shadcn maps brings drop-in interactive SVG vector map components to the React and shadcn/ui ecosystem. Supporting over 170+ country, continent, and regional boundaries, it delivers seamless hover tooltips, zoom/pan navigation, multi-region selection, and customizable color choropleths with zero GIS configuration.

Key Features

• 🗺️ 170+ Interactive SVG Maps: Ready-to-use vector maps covering world projections, continents, individual countries, and state/provincial divisions.
• 📦 shadcn CLI Native Distribution: Install any map component directly into your /components/ui/ folder with standard shadcn CLI commands.
• ⚡ Lightweight & High Performance: Clean SVG vector rendering with no bulky tile-server dependencies or Mapbox/Google Maps API billing.
• 🎨 Tailwind Styling & Theming: Style regions, borders, active selections, and tooltip overlays using Tailwind CSS utility tokens.

Installation & Quick Start

# Add map component using shadcn CLI
npx shadcn@latest add https://www.shadcnmaps.com/r/world-map

import React from 'react';
import { WorldMap } from '@/components/ui/world-map';

export function AnalyticsMap() {
  return (
    <div className="w-full max-w-4xl p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950">
      <h3 className="text-lg font-semibold mb-4">Global Active Users</h3>
      <WorldMap
        highlightedRegions={['US', 'DE', 'JP', 'GB', 'SG']}
        onRegionClick={(code) => console.log('Selected region:', code)}
      />
    </div>
  );
}

Why Choose shadcn maps?

• Analytics & SaaS Dashboards: Easily visualize user distributions, server regional latency, and sales data without heavyweight map engines.
• Full Code Ownership: Pure React components residing directly inside your project codebase for custom styling and animation.