Add comprehensive visual examples for all cursor types #2431
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@Ahmed-aleryani is attempting to deploy a commit to the Tailwind Labs Team on Vercel. A member of the Team first needs to authorize it. |
Add visual examples organized by category showing all 38 cursor utilities: - Interactive cursors (pointer, help, context-menu, progress, wait) - Selection cursors (default, text, vertical-text, crosshair, cell) - Drag & drop cursors (grab, grabbing, move, copy, alias, no-drop) - Resize cursors (all directional and bi-directional variants) - Zoom and state cursors (zoom-in, zoom-out, not-allowed, auto, none) Fixes tailwindlabs#2267
Ahmed-aleryani
force-pushed
the
add-cursor-visual-examples
branch
from
ee061cc to
fc91c62
Compare
Author
|
@thecrypticace This is a larger PR adding examples for all cursor types. Happy to adjust the organization if you have preferences. Thanks! |
Author
|
@adamwathan Small UX/UI improvement by adding cursor examples similar to v3 documentation V3 cursor docsNotice it shows how cursor looks like 
V4.1 is missing cursor illustration examples
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds comprehensive visual examples for all 38 cursor utility classes, organized into logical categories for easier understanding.
Changes
Added 5 new example sections showcasing all cursor types:
Issue
Closes #2267
Testing
✅ Verified locally on development server
✅ All 38 cursor types render correctly in interactive grids
✅ Hover interactions work on all boxes
✅ Grid layouts are responsive (2-col mobile, 3-4 col desktop)
✅ Dark mode compatibility confirmed
✅ Hover hints guide users to test each cursor
✅ Code snippets include proper syntax highlighting
Before
Only 3 cursor types had visual examples (pointer, progress, not-allowed). Users couldn't see what the other 35 cursor types looked like.
After
All 38 cursor utilities now have visual examples organized by category, making it easy for developers to:
Each section follows the established documentation pattern with interactive examples, code snippets, and helpful hints.