# mapcn Blocks

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

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.

Website: https://mapcn.dev/blocks

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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](https://x.com/anmold_s/status/2033608676154490977): 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](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/mapcn-blocks

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.