---
name: "@terrae"
slug: "terrae"
description: "A shadcn/ui companion library of composable, animated map components for React built on Mapbox GL JS and MapLibre GL, TypeScript, and Tailwind CSS. Components cover basic-map, markers, animated markers, circles, circle clusters, polygons, lines, animated lines, radial lines, heatmaps, popups, radar, choropleth, compare/comparison, minimap, compass, controls, camera-follow, raster video, and dramatic particle effects (fire, lightning, rain, explosion, cyclone, meteor). Offers hooks and an API reference. Free and open source (MIT). Use for: any React/Next.js app that needs declarative, shadcn-integrated interactive maps with rich visual effects and animated data layers."
category: "Maps"
tags: ["aesthetic", "animation", "audio", "auth", "charts", "forms", "hooks", "maps", "media"]
framework: "react"
license: "MIT"
author: "alamenai"
website: "https://www.terrae.dev"
github: "https://github.com/alamenai/terrae"
registry: "https://www.terrae.dev/registry.json"
pro: false
pro_url: null
github_stars: 242
component_count: 40
generated_at: "2026-07-28T08:59:05.895Z"
---

# @terrae

A shadcn/ui companion library of composable, animated map components for React built on Mapbox GL JS and MapLibre GL, TypeScript, and Tailwind CSS. Components cover basic-map, markers, animated markers, circles, circle clusters, polygons, lines, animated lines, radial lines, heatmaps, popups, radar, choropleth, compare/comparison, minimap, compass, controls, camera-follow, raster video, and dramatic particle effects (fire, lightning, rain, explosion, cyclone, meteor). Offers hooks and an API reference. Free and open source (MIT). Use for: any React/Next.js app that needs declarative, shadcn-integrated interactive maps with rich visual effects and animated data layers.

## Links

- Website: https://www.terrae.dev
- GitHub: https://github.com/alamenai/terrae
- Registry JSON: https://www.terrae.dev/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/terrae
- This file: https://sh4dcn.vercel.app/md/terrae.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.terrae.dev/registry.json
pnpm dlx shadcn@latest add https://www.terrae.dev/registry.json
bunx shadcn@latest add https://www.terrae.dev/registry.json
# clone the source repo
git clone https://github.com/alamenai/terrae.git
# fetch the raw registry index
curl -s https://www.terrae.dev/registry.json
```

## Components (40)

| name | type | description | install |
| --- | --- | --- | --- |
| map | registry:ui | Core map component with Mapbox GL and MapLibre GL support. | `npx shadcn@latest add https://www.terrae.dev/map.json` |
| marker | registry:ui | Customizable map markers with popup support. | `npx shadcn@latest add https://www.terrae.dev/marker.json` |
| popup | registry:ui | Info popups and tooltips for map locations. | `npx shadcn@latest add https://www.terrae.dev/popup.json` |
| controls | registry:ui | Interactive map controls (zoom, fullscreen, etc). | `npx shadcn@latest add https://www.terrae.dev/controls.json` |
| circle-cluster | registry:ui | Marker clustering with circle visualization. | `npx shadcn@latest add https://www.terrae.dev/circle-cluster.json` |
| marker-animated | registry:ui | Animated marker that moves along a path with trail visualization. | `npx shadcn@latest add https://www.terrae.dev/marker-animated.json` |
| line | registry:ui | Static routes and paths on the map. | `npx shadcn@latest add https://www.terrae.dev/line.json` |
| line-animated | registry:ui | Animated path and route animations on the map. | `npx shadcn@latest add https://www.terrae.dev/line-animated.json` |
| animated-pulse | registry:ui | Pulsing dot animation for map markers. | `npx shadcn@latest add https://www.terrae.dev/animated-pulse.json` |
| rain | registry:ui | Animated rain effect layer. | `npx shadcn@latest add https://www.terrae.dev/rain.json` |
| raster-video | registry:ui | Video overlay layers on the map. | `npx shadcn@latest add https://www.terrae.dev/raster-video.json` |
| image | registry:ui | Image overlay layers on the map. | `npx shadcn@latest add https://www.terrae.dev/image.json` |
| mini-map | registry:ui | Minimap overview navigation component. | `npx shadcn@latest add https://www.terrae.dev/mini-map.json` |
| compare | registry:ui | Side-by-side map comparison component. | `npx shadcn@latest add https://www.terrae.dev/compare.json` |
| sync | registry:ui | Synchronized multi-map component with bidirectional movement sync. | `npx shadcn@latest add https://www.terrae.dev/sync.json` |
| arc-animated | registry:ui | Animated curved arc between two points for flights, deliveries, and connections. | `npx shadcn@latest add https://www.terrae.dev/arc-animated.json` |
| camera-follow | registry:ui | Animate camera along a path for immersive fly-through experiences. | `npx shadcn@latest add https://www.terrae.dev/camera-follow.json` |
| circle | registry:ui | Draggable geographic circle with customizable fill and stroke. | `npx shadcn@latest add https://www.terrae.dev/circle.json` |
| animated-circle | registry:ui | Animated circle with drawing and fill effects. | `npx shadcn@latest add https://www.terrae.dev/animated-circle.json` |
| blur-area | registry:ui | Blur sensitive areas on the map with customizable styling. | `npx shadcn@latest add https://www.terrae.dev/blur-area.json` |
| targeting-reticle | registry:ui | Military-style targeting brackets with tracking and lock-on capabilities. | `npx shadcn@latest add https://www.terrae.dev/targeting-reticle.json` |
| radar | registry:ui | Animated radar sweep signal overlay on map coordinates. | `npx shadcn@latest add https://www.terrae.dev/radar.json` |
| watermark | registry:ui | Text watermark overlay for maps with configurable position and styling. | `npx shadcn@latest add https://www.terrae.dev/watermark.json` |
| compass | registry:ui | Interactive compass overlay with bearing display and click-to-reset. | `npx shadcn@latest add https://www.terrae.dev/compass.json` |
| line-radial | registry:ui | Radial lines from a center point to multiple destinations with optional markers. | `npx shadcn@latest add https://www.terrae.dev/line-radial.json` |
| polygon | registry:ui | Geographic polygon with customizable fill and stroke styling. | `npx shadcn@latest add https://www.terrae.dev/polygon.json` |
| animated-polygon | registry:ui | Animated polygon with draw, fill, and draw-then-fill effects. | `npx shadcn@latest add https://www.terrae.dev/animated-polygon.json` |
| choropleth | registry:ui | Thematic choropleth map with color-coded regions based on data values. | `npx shadcn@latest add https://www.terrae.dev/choropleth.json` |
| animated-footprint | registry:ui | Animated footprint steps that walk along a path on the map. | `npx shadcn@latest add https://www.terrae.dev/animated-footprint.json` |
| fire | registry:ui | Realistic animated fire effect with particle simulation. | `npx shadcn@latest add https://www.terrae.dev/fire.json` |
| explosion | registry:ui | Animated explosion burst effect with radial particles and flash. | `npx shadcn@latest add https://www.terrae.dev/explosion.json` |
| cyclone | registry:ui | Animated cyclone funnel with swirling particles and debris. | `npx shadcn@latest add https://www.terrae.dev/cyclone.json` |
| music-disc | registry:ui | Rotating music disc with floating notes animation. | `npx shadcn@latest add https://www.terrae.dev/music-disc.json` |
| steam | registry:ui | Rising steam effect with wispy particle animation. | `npx shadcn@latest add https://www.terrae.dev/steam.json` |
| tsunami | registry:ui | Animated tsunami wave effect with incoming wave, crashing foam, and debris. | `npx shadcn@latest add https://www.terrae.dev/tsunami.json` |
| sandstorm | registry:ui | Atmospheric sandstorm effect with horizontal particle movement and reduced visibility. | `npx shadcn@latest add https://www.terrae.dev/sandstorm.json` |
| snow | registry:ui | Falling snowflakes effect with gentle drift and wind. | `npx shadcn@latest add https://www.terrae.dev/snow.json` |
| meteor | registry:ui | Animated meteor falling from sky with fiery trail and impact effect. | `npx shadcn@latest add https://www.terrae.dev/meteor.json` |
| lightning | registry:ui | Animated lightning bolt strikes with branching and flash effects. | `npx shadcn@latest add https://www.terrae.dev/lightning.json` |
| grid | registry:ui | Coordinate grid overlay with latitude/longitude lines and labels. | `npx shadcn@latest add https://www.terrae.dev/grid.json` |

## For AI agents

```text
You are adding components from @terrae to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/terrae.md) for the component list.
2. Fetch the machine-readable index: https://www.terrae.dev/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: terrae).
```