xiry.

Development · Website

mapcn Blocks

Pre-built, copy-paste React map blocks styled with Tailwind and MapLibre.

From the Xiry library · Updated 10 October 2026

Visit mapcn.dev ↗

mapcn Blocks provides pre-built interactive map layouts designed to integrate directly into React projects via the shadcn CLI. Built on MapLibre GL and styled with Tailwind CSS, the components include complete UI patterns like delivery tracking, analytics maps, and store locators. It gives developers full ownership over the source code so they can customize styles and behavior directly.

What it's for

  • Add a real-time order tracking map with live courier coordinates to an e-commerce dashboard
  • Display global user distribution and web traffic metrics on an analytics overview
  • Build a searchable store locator with synced map markers and list views
  • Visualize regional server latency and edge node status on an uptime dashboard

Features

  • One-command installation directly into your project using npx shadcn
  • Built on MapLibre GL for client-side vector and raster map rendering
  • Styled using Tailwind CSS to match standard shadcn/ui design systems
  • Pre-designed blocks including Heatmap, Delivery Tracker, Choropleth, and Logistics Network
  • Full source code ownership with zero locked-in third-party UI dependencies

Pricing

Open source. Free and open-source

Details

Type
Website
Category
Development
Topic
UI Components
Open source
Yes
Platforms
Code library, Web
For
React and Next.js developers building dashboards and map-heavy web apps
Alternative to
react-map-gl, Leaflet, Google Maps JavaScript API
Tags
react, nextjs, maps, shadcn, tailwind, maplibre, components

Why it was saved

  • @anmold_s, 16 March 2026: Adding maps to React apps is reduced to browsing examples and running an npx shadcn command; blocks cover common use cases and are customizable before shipping.

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated