Globe

PreviewCode

Globe

@/demos/GlobeDemo.tsx

import { Globe } from '@/registry/magicui/globe'

export function GlobeDemo() {
  return (
    <div
      class="
        relative flex size-full max-w-lg items-center justify-center
        overflow-hidden rounded-lg border bg-background px-40 pt-8 pb-40
        md:pb-60
      "
    >
      <span
        class="
          pointer-events-none bg-linear-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 class="top-28" />
      <div
        class="
          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>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/globe

bun

bunx shadcn@latest add @magicui-solid/globe

yarn

yarn dlx shadcn@latest add @magicui-solid/globe

npm

npx shadcn@latest add @magicui-solid/globe

Import

import { Globe } from '@/components/magicui/globe'

Usage

<Globe />

Props

Prop	Type	Default	Description
class	string	-	The css classes for the component.
config	COBEOptions	{}	The configuration options for the globe. More details here

Original:

magicui.design/docs/components/globe