A highly performant 3D globe component built with Cobe, featuring smooth rotation and location markers.
Installation
npx shadcn@latest add @magicui/globe
# Also install dependencies
npm install cobe motion
import { Globe } from "@/components/ui/globe"
export default function Example() {
return (
<div className="relative h-[600px] w-full">
<Globe />
</div>
)
}
CSS classes for the component wrapper
Configuration options for the globe. See Cobe docs for all options Configuration Options
The config prop accepts all Cobe configuration options, including:
phi - Rotation angle around the vertical axistheta - Rotation angle around the horizontal axisdark - Darkness level (0-1)diffuse - Diffuse lighting intensitymapSamples - Number of samples for map renderingmapBrightness - Brightness of the mapbaseColor - RGB array for base colormarkerColor - RGB array for marker colorglowColor - RGB array for glow colormarkers - Array of location markers
Example with Custom Config
import { Globe } from "@/components/ui/globe"
const config = {
width: 800,
height: 800,
mapBrightness: 1.5,
baseColor: [0.5, 0.5, 1],
markerColor: [1, 0.5, 0.2],
markers: [
{ location: [40.7128, -74.006], size: 0.1 },
{ location: [51.5074, -0.1278], size: 0.08 },
],
}
export default function Example() {
return <Globe config={config} />
}
Features
- WebGL-powered 3D rendering
- Auto-rotation with physics
- Interactive dragging
- Location markers
- Customizable colors and appearance
- Smooth animations
- Responsive sizing
Credits
Built on top of Cobe by dillionverma