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:

"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
      preset="hologram"
      markers={markers}
      arcs={markers.slice(1).map((city) => ({ from: markers[0], to: city }))}
      tooltip={(marker) => marker.name}
    />
  );
}

License key

Purchase a commercial license, then pass the supplied license key to the component's licenseKey prop. See the license-key guide.

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