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