Components, not layers

Composable and animated components that replace imperative layers with simple props. The perfect companion for shadcn/ui.

Start Building Browse Components

Cyclone Tracking

Category 4

active

Meteor Impact

Meteor Alert

Impact detected

Grand Canyon, AZ

Lightning Storm

Storm Warning

Electrical storm

Central US

Route Tracking

Manhattan, NY

8 steps

Wildfire Spread

Wildfire Alert

Paradise, CA

spreading

Browse All Components

Built for builders

For design engineers, developers, and everyone who wants to ship stunning, modern maps — in no time.

Design Engineers

Create stunning map animations with smooth, GPU-accelerated performance. Cyclones, meteors, lightning — all ready to go.

Frontend Engineers

Drop composable components into your React app. Enjoy TypeScript-first APIs with full type safety.

Vibe Coders

Just vibe and ship. Prompt a map, drop in a cyclone, add some fire — no docs needed.

Write maps in minutes, not hours

See how Terrae replaces hundreds of lines of imperative code with clean, declarative components.

Mapbox GL JS

map.on("load", () => {
  const el = document.createElement("div")
  el.className = "marker"
  el.style.width = "32px"
  el.style.height = "32px"
  el.style.borderRadius = "50%"
  el.style.backgroundColor = "#3b82f6"
  el.style.cursor = "pointer"

  const popup = new mapboxgl.Popup({ offset: 25 })
    .setHTML("<h3>New York</h3><p>The Big Apple</p>")

  el.addEventListener("click", () => {
    popup.addTo(map)
  })

  new mapboxgl.Marker(el)
    .setLngLat([-74.006, 40.7128])
    .setPopup(popup)
    .addTo(map)
})

Terrae

<MapMarker coordinates={[-74.006, 40.7128]}>
  <MarkerContent>
    <div className="size-8 rounded-full bg-blue-500" />
  </MarkerContent>
  <MarkerPopup>
    <h3>New York</h3>
    <p>The Big Apple</p>
  </MarkerPopup>
</MapMarker>