Terrae
Everything you need to build interactive, production-ready maps in React.
Terrae (pronounced TER-ray) provides beautifully designed, accessible, and customizable map components. Built on Mapbox GL, styled with Tailwind CSS, and designed to work with shadcn/ui.
Why Terrae?
Building interactive maps in React has always been frustrating. Existing solutions either require too much boilerplate, follow imperative patterns that don't align with React's declarative philosophy, or lack integration with modern tooling like shadcn/ui. Terrae was created to solve this—providing composable, beautiful map components that feel natural in React applications.
Features
Theme Aware
Automatic light/dark theme switching integrated with next-themes.
Declarative API
React-first declarative patterns instead of imperative Mapbox API calls.
TypeScript First
Full type safety with comprehensive TypeScript definitions.
Advanced Animations
Smooth animations with playback controls and marker tracking.
Advanced Effects
Support for video layers, rain effects, and advanced visualizations.
Install What You Need
Similar to shadcn/ui, Terrae lets you install components individually. Start with the base map component, then add only the features you need:
npx shadcn@latest add https://terrae.vercel.app/maps/map.json
npx shadcn@latest add https://terrae.vercel.app/maps/map-marker.json
npx shadcn@latest add https://terrae.vercel.app/maps/map-controls.json