Globe

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Max-Samson/magicui/llms.txt

Use this file to discover all available pages before exploring further.

​

Installation

npx shadcn@latest add @magicui/globe
# Also install dependencies
npm install cobe motion

​

Usage

import { Globe } from "@/components/ui/globe"

export default function Example() {
  return (
    <div className="relative h-[600px] w-full">
      <Globe />
    </div>
  )
}

​

Props

​

Configuration Options

• phi - Rotation angle around the vertical axis
• theta - Rotation angle around the horizontal axis
• dark - Darkness level (0-1)
• diffuse - Diffuse lighting intensity
• mapSamples - Number of samples for map rendering
• mapBrightness - Brightness of the map
• baseColor - RGB array for base color
• markerColor - RGB array for marker color
• glowColor - RGB array for glow color
• markers - 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