Pro
Radar scan
A nearby search: a sweep turns over rings and each item appears as a blip the first time the beam passes it, then brightens on every pass. Found items join the list beside it, nearest first, and choosing either the blip or the row selects both.
pnpm dlx shadcn@latest add @caliper/radar-scanWhen to use
Use it for
- Finding nearby devices, people or places before sharing or pairing.
- Discovery steps where results arrive over a few seconds.
Skip it when
- Results that are all available at once; show the list.
- Real positions people will navigate by.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Found by the beam
- An item appears when the sweep first reaches its bearing, so arrivals are paced by the motion and feel discovered.
- It ends
- After a full turn with everything found the sweep rests and offers Scan again, so it never runs forever.
- Two ways in
- Blips and rows are buttons with the same names; the count is announced politely and reduced motion finds everything at once.
Installation
pnpm dlx shadcn@latest add @caliper/radar-scan
Adds its 3 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 { RadarScan } from "@/components/ui/radar-scan"
The worked example comes with Pro
The 37-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
RadarScan
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-hidden, aria-pressed, aria-label and aria-live in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Dotted mapA 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.
- Presence listA list where an added row opens from nothing and a removed row closes, so a live feed or a queue changes without jumping. The first render is immediate.
- Share sheetA bottom sheet of ways to share an item.