Dot Ring Cursor
A free custom cursor for React with a dot and trailing ring.
A text face built for the tenth page, not the first
Meridian ships in six weights with drawn italics, tabular figures that hold their column, and small caps cut at each weight rather than scaled down from the roman.
Standfast trials are unrestricted for unpublished work, client presentations included.
Customise
Code
<CursorDotRing>
{/* your content */}
</CursorDotRing>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 on a quick eased follow 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.
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-accent" 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, written once per frame with no React re-renders, and nothing runs once the layers settle; 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.