CanvasGlobe for shadcn/ui

Install the CanvasGlobe React component directly into a shadcn project:

npx shadcn@latest add https://canvasglobe.swiftools.com/r/canvas-globe.json

The command adds a typed CanvasGlobe component and installs canvas-globe. The component renders with Canvas 2D and does not require WebGL, a map API, or a tile service. This Next.js App Router example reads its public license key from NEXT_PUBLIC_CANVAS_GLOBE_LICENSE_KEY:

"use client";

import { CanvasGlobe } from "@/components/ui/canvas-globe";

const markers = [
  { name: "Ahmedabad", lat: 23.03, lon: 72.58, count: 12, live: true },
  { name: "London", lat: 51.5, lon: -0.12, count: 8 },
  { name: "Tokyo", lat: 35.68, lon: 139.69, count: 4 },
];

export function AudienceGlobe() {
  return (
    <CanvasGlobe
      licenseKey={process.env.NEXT_PUBLIC_CANVAS_GLOBE_LICENSE_KEY!}
      preset="hologram"
      markers={markers}
      arcs={markers.slice(1).map((city) => ({ from: markers[0], to: city }))}
      tooltip={(marker) => marker.name}
    />
  );
}

For Vite, pass import.meta.env.VITE_CANVAS_GLOBE_LICENSE_KEY instead. In Create React App, use process.env.REACT_APP_CANVAS_GLOBE_LICENSE_KEY.

License key

Do not commit a license key. Proprietary and closed-source projects must purchase a commercial license. GPLv3-compatible projects can follow the GPL licensing path.

For the full component API, see the React integration guide and options reference.