Pro
Dotted map
A dotted world with places on it and routes between them. Routes draw in once, then a short light runs along each in its direction. Choosing a place keeps its routes lit and dims the rest.
pnpm dlx shadcn@latest add @caliper/dotted-mapWhen to use
Use it for
- Where a team sits, which regions serve which, how a payment or deploy travels.
- A landing or status page that should say "global" with real places.
Skip it when
- Values per country; use the choropleth.
- Exact geography; this is a 2.5° dot grid.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Light means live, and pauses
- The running light loops, so it has a pause button and is off under reduced motion.
Styling
- Shares the globe's land
- The land grid is the globe's own 2.5° bitmap from Natural Earth, drawn as one path.
Usage
- Said in words
- Every place is a button with its name and detail, and a hidden list reads each route as a sentence.
Installation
pnpm dlx shadcn@latest add @caliper/dotted-map
Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { DottedMap } from "@/components/ui/dotted-map"
The worked example comes with Pro
The 36-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
DottedMap
component
Accessibility
It is built on native elements and keeps aria-pressed and aria-label in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.
Related
- GlobeA rotating globe with labelled points sized by value.
- ChoroplethA map shaded by value per region.
- Connection beamSources feed a hub and the hub feeds destinations, with light running along each curve in the direction data goes. Curves are measured from where the real nodes land, so labels can be any length. A link can be idle.