How do I install Collaborative Cursors?

Run npx shadcn@latest add @aceternity/collaborative-cursors in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Collaborative Cursors responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Collaborative Cursors is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Illustrations

20 / 22

Collaborative Cursors

Animated multiplayer cursors with name tags drawing selection boxes over a code file. Simulates real-time collaboration with staggered cursor movements.

Sarah

Tyler

Animated cursors with avatars and name tags that move across a code file background. Each cursor draws a selection box as it moves, then fades out before the next cursor animates.

The code file shows syntax-highlighted placeholder lines with proper indentation. Cursors use the IconPointerFilled from Tabler icons with color-coded name badges.

Selection boxes grow from the cursor's starting position to its destination, synchronized with the cursor movement. Animations are staggered so cursors take turns selecting different areas.

Works well for collaborative tools, code editors, design apps, or any product featuring real-time multiplayer presence.

More from Illustrations

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Chat Conversation Folder With Files Features Section With Skeletons Illustrations Feature Sections

About this block

Animated cursors with avatars and name tags that move across a code file background. Each cursor draws a selection box as it moves, then fades out before the next cursor animates.

The code file shows syntax-highlighted placeholder lines with proper indentation. Cursors use the IconPointerFilled from Tabler icons with color-coded name badges.

Selection boxes grow from the cursor's starting position to its destination, synchronized with the cursor movement. Animations are staggered so cursors take turns selecting different areas.

Works well for collaborative tools, code editors, design apps, or any product featuring real-time multiplayer presence.