Globe

Pro

Canvas-rendered rotating dot globe with depth-based opacity. Zero external dependencies. Configurable size, dot color, spacing, and rotation speed.

Pro component — requires an active license. Get access →

Installation

Add your token to .env

Get a token from your dashboard, then add it to .env:

bash

PARTICLEUI_TOKEN=your-token-here

Add the registry to components.json

Wire up the authenticated registry so the CLI can resolve Pro components:

bash

"registries": {
  "@particleui": {
    "url": "https://particleui.dev/r/react/{name}.json",
    "headers": { "Authorization": "Bearer ${PARTICLEUI_TOKEN}" }
  }
}

Run the CLI

bash

npx particleui-cli add globe

Usage

TSX

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

export default function Example() {
  return (
    <div className="flex items-center justify-center p-8">
      <Globe size={320} />
    </div>
  )
}

Props

Prop	Type	Default	Required
size	number	`320`	no
dotColor	string	`"oklch(78% 0.17 200)"`	no
dotRadius	number	`1.2`	no
dotSpacing	number	`8`	no
speed	number	`0.003`	no
className	string	—	no

Details

Source filecomponents/ui/globe.tsx

Typeui

Categoriesbackground, animations

npm dependencies

Registry deps

Claude skill—