World Map
Dotted world map with animated connection arcs between points.
Preview
World Map
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Global reach sections and infrastructure maps.
Why this component matters
A world map communicates scale and global presence instantly. The animated arcs show connectivity.
Usage guidance
Use to show global distribution, partnerships, or user base. Highlight 3-5 key connection points. Use IO purple for the arc color.
Installation
bash
npx shadcn@latest add @aceternity/world-mapUsage
example.tsxtsx
import { WorldMap } from "@/components/ui/world-map";
export default function Example() {
return (
<WorldMap>
{/* Your content here */}
</WorldMap>
);
}Source
world-map.tsx
components/ui/world-map.tsx