Dot Ring Cursor
A free custom cursor for React with a dot and trailing ring.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Dot Ring Cursor is a free custom cursor component for Next.js and React, styled with Tailwind, that layers a crisp dot and a trailing ring over any region you wrap. The dot tracks the pointer almost 1:1 through GSAP quickTo while the ring follows on a slower quart ease, and over links, buttons or anything marked data-cursor-hover the ring grows and fades while the dot shrinks.
The native operating system cursor is never hidden, so the layers read as decoration rather than a replacement. On touch devices and for reduced-motion users no listeners attach and the layers stay invisible, leaving the wrapped content exactly as it would be without the component.
A dot that keeps up, a ring that follows
Move your pointer around this area: the dot tracks it while the ring trails behind. Rest on a link or button and the ring grows around it. On touch screens and under reduced motion this region stays completely still.
Any element with data-cursor-hover grows the ring too.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/cursor-dot-ringUsage
import { CursorDotRing } from "@/components/cursor-dot-ring";
export default function Page() {
return (
<CursorDotRing
ringSize={36}
hoverScale={1.6}
className="rounded-xl border border-border"
>
<section className="space-y-4 p-10">
<h2 className="text-2xl font-semibold">Hover anything interactive</h2>
<a href="/pricing" className="underline underline-offset-4">
See pricing
</a>
<button type="button">Get started</button>
</section>
</CursorDotRing>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Region the cursor effect is scoped to. |
| ringSize | number | 36 | Ring diameter in px at rest. |
| hoverScale | number | 1.6 | Ring scale over links and buttons. |
| className | string | undefined | Merged onto the wrapper. |
Customisation
This component has no Tier 3 CSS variables: sizing and growth are props, and both layers draw with currentColor. Set a semantic text colour utility on className to retheme the dot and ring together, and add data-cursor-hover to any non-standard element that should grow the ring.
<CursorDotRing className="text-primary" ringSize={48} hoverScale={2}>
<div data-cursor-hover>A custom hover target</div>
</CursorDotRing>Frequently asked questions
- Is Dot Ring Cursor free for commercial use?
- Yes. Dot Ring Cursor is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Dot Ring Cursor accessible and performant?
- Yes. Both layers are aria-hidden and pointer-events none, the operating system cursor is never hidden, and keyboard focus styles are untouched. Movement is transform-only through two persistent GSAP quickTo tweens with no React re-renders, and on touch devices or under reduced motion no listeners attach at all.
- How do I customise the Dot Ring Cursor?
- Use the ringSize prop for the resting diameter and hoverScale for growth over interactive elements. Both layers inherit currentColor, so a text colour utility on className changes their colour, and data-cursor-hover opts any extra element into the hover growth.