Search for a command to run...
An autorotating, interactive, and highly performant globe made using WebGL.
import { Globe } from "@/registry/magicui/globe" export function GlobeDemo() { return ( <div className="bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border px-40 pt-8 pb-40 md:pb-60"> <span className="pointer-events-none bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl leading-none font-semibold whitespace-pre-wrap text-transparent dark:from-white dark:to-slate-900/10"> Globe </span> <Globe className="top-28" /> <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" /> </div> ) }
pnpmnpmyarnbunpnpm dlx shadcn@latest add @magicui/globeCopy
pnpm dlx shadcn@latest add @magicui/globe
Copyimport { Globe } from "@/components/ui/globe"
import { Globe } from "@/components/ui/globe"
Copy<Globe />
<Globe />
className
string
-
config
COBEOptions
{}
This component is built on top of Cobe.