Pro
Edge hover grid
Tiles whose hover fill follows the pointer: it slides in from the edge the pointer came through and leaves by the edge it exits, so moving across the grid reads as one continuous gesture.
pnpm dlx shadcn@latest add @caliper/edge-hover-gridWhen to use
Use it for
- Navigation tiles, product areas, resources and docs entry points.
- A feature list that should feel responsive under the pointer.
Skip it when
- Rows of data; hover fills on tables hide the content.
- Touch-only screens, where there is no hover to follow.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Nearest edge, in proportion
- The entry edge is the nearest one measured as a share of the tile, so tall and wide tiles behave the same.
Styling
- Hairlines from the gap
- The grid's 1px gap shows the border colour, so tiles share edges without doubled borders.
Installation
pnpm dlx shadcn@latest add @caliper/edge-hover-grid
Adds its 2 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. It is built from EdgeHoverGrid and nearestEdge.
import { EdgeHoverGrid, nearestEdge } from "@/components/ui/edge-hover-grid"
The worked example comes with Pro
The 34-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
EdgeHoverGrid
component
nearestEdge
component
No props of its own; it accepts the native props of its root element.
Accessibility
It is built on native elements and keeps aria-label and aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.