Skip to content

Commit fc91c62

Browse files
Ahmed-aleryaniAhmed-aleryani
committed
Add comprehensive visual examples for all cursor types
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 #2267
1 parent e018f28 commit fc91c62

File tree

1 file changed

+347
-0
lines changed

1 file changed

+347
-0
lines changed

‎src/docs/cursor.mdx‎

Lines changed: 347 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,353 @@ Use utilities like `cursor-pointer` and `cursor-grab` to control which cursor is
9595

9696
</Figure>
9797

98+
### Interactive cursors
99+
100+
Use utilities like `cursor-pointer`, `cursor-help`, and `cursor-wait` for interactive elements:
101+
102+
<Figure hint="Hover over each box to see the cursor change">
103+
104+
<Example>
105+
{
106+
<div className="grid grid-cols-2 gap-4 text-center sm:grid-cols-3">
107+
<div className="flex flex-col items-center">
108+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-pointer</p>
109+
<div className="flex h-20 w-full cursor-pointer items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
110+
Hover me
111+
</div>
112+
</div>
113+
<div className="flex flex-col items-center">
114+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-help</p>
115+
<div className="flex h-20 w-full cursor-help items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
116+
Hover me
117+
</div>
118+
</div>
119+
<div className="flex flex-col items-center">
120+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-context-menu</p>
121+
<div className="flex h-20 w-full cursor-context-menu items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
122+
Hover me
123+
</div>
124+
</div>
125+
<div className="flex flex-col items-center">
126+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-progress</p>
127+
<div className="flex h-20 w-full cursor-progress items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
128+
Hover me
129+
</div>
130+
</div>
131+
<div className="flex flex-col items-center">
132+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-wait</p>
133+
<div className="flex h-20 w-full cursor-wait items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
134+
Hover me
135+
</div>
136+
</div>
137+
</div>
138+
}
139+
</Example>
140+
141+
```html
142+
<!-- [!code classes:cursor-pointer,cursor-help,cursor-context-menu,cursor-progress,cursor-wait] -->
143+
<div class="cursor-pointer ...">Hover me</div>
144+
<div class="cursor-help ...">Hover me</div>
145+
<div class="cursor-context-menu ...">Hover me</div>
146+
<div class="cursor-progress ...">Hover me</div>
147+
<div class="cursor-wait ...">Hover me</div>
148+
```
149+
150+
</Figure>
151+
152+
### Selection cursors
153+
154+
Use utilities like `cursor-text` and `cursor-crosshair` for text selection and precise positioning:
155+
156+
<Figure hint="Hover over each box to see the cursor change">
157+
158+
<Example>
159+
{
160+
<div className="grid grid-cols-2 gap-4 text-center sm:grid-cols-3">
161+
<div className="flex flex-col items-center">
162+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-default</p>
163+
<div className="flex h-20 w-full cursor-default items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
164+
Hover me
165+
</div>
166+
</div>
167+
<div className="flex flex-col items-center">
168+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-text</p>
169+
<div className="flex h-20 w-full cursor-text items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
170+
Hover me
171+
</div>
172+
</div>
173+
<div className="flex flex-col items-center">
174+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-vertical-text</p>
175+
<div className="flex h-20 w-full cursor-vertical-text items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
176+
Hover me
177+
</div>
178+
</div>
179+
<div className="flex flex-col items-center">
180+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-crosshair</p>
181+
<div className="flex h-20 w-full cursor-crosshair items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
182+
Hover me
183+
</div>
184+
</div>
185+
<div className="flex flex-col items-center">
186+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-cell</p>
187+
<div className="flex h-20 w-full cursor-cell items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
188+
Hover me
189+
</div>
190+
</div>
191+
</div>
192+
}
193+
</Example>
194+
195+
```html
196+
<!-- [!code classes:cursor-default,cursor-text,cursor-vertical-text,cursor-crosshair,cursor-cell] -->
197+
<div class="cursor-default ...">Hover me</div>
198+
<div class="cursor-text ...">Hover me</div>
199+
<div class="cursor-vertical-text ...">Hover me</div>
200+
<div class="cursor-crosshair ...">Hover me</div>
201+
<div class="cursor-cell ...">Hover me</div>
202+
```
203+
204+
</Figure>
205+
206+
### Drag and drop cursors
207+
208+
Use utilities like `cursor-grab` and `cursor-move` for draggable elements:
209+
210+
<Figure hint="Hover over each box to see the cursor change">
211+
212+
<Example>
213+
{
214+
<div className="grid grid-cols-2 gap-4 text-center sm:grid-cols-3">
215+
<div className="flex flex-col items-center">
216+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-grab</p>
217+
<div className="flex h-20 w-full cursor-grab items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
218+
Hover me
219+
</div>
220+
</div>
221+
<div className="flex flex-col items-center">
222+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-grabbing</p>
223+
<div className="flex h-20 w-full cursor-grabbing items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
224+
Hover me
225+
</div>
226+
</div>
227+
<div className="flex flex-col items-center">
228+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-move</p>
229+
<div className="flex h-20 w-full cursor-move items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
230+
Hover me
231+
</div>
232+
</div>
233+
<div className="flex flex-col items-center">
234+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-copy</p>
235+
<div className="flex h-20 w-full cursor-copy items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
236+
Hover me
237+
</div>
238+
</div>
239+
<div className="flex flex-col items-center">
240+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-alias</p>
241+
<div className="flex h-20 w-full cursor-alias items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
242+
Hover me
243+
</div>
244+
</div>
245+
<div className="flex flex-col items-center">
246+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-no-drop</p>
247+
<div className="flex h-20 w-full cursor-no-drop items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
248+
Hover me
249+
</div>
250+
</div>
251+
</div>
252+
}
253+
</Example>
254+
255+
```html
256+
<!-- [!code classes:cursor-grab,cursor-grabbing,cursor-move,cursor-copy,cursor-alias,cursor-no-drop] -->
257+
<div class="cursor-grab ...">Hover me</div>
258+
<div class="cursor-grabbing ...">Hover me</div>
259+
<div class="cursor-move ...">Hover me</div>
260+
<div class="cursor-copy ...">Hover me</div>
261+
<div class="cursor-alias ...">Hover me</div>
262+
<div class="cursor-no-drop ...">Hover me</div>
263+
```
264+
265+
</Figure>
266+
267+
### Resize cursors
268+
269+
Use resize cursor utilities to indicate which direction an element can be resized:
270+
271+
<Figure hint="Hover over each box to see the cursor change">
272+
273+
<Example>
274+
{
275+
<div className="grid grid-cols-2 gap-4 text-center sm:grid-cols-4">
276+
<div className="flex flex-col items-center">
277+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-n-resize</p>
278+
<div className="flex h-20 w-full cursor-n-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
279+
Hover me
280+
</div>
281+
</div>
282+
<div className="flex flex-col items-center">
283+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-e-resize</p>
284+
<div className="flex h-20 w-full cursor-e-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
285+
Hover me
286+
</div>
287+
</div>
288+
<div className="flex flex-col items-center">
289+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-s-resize</p>
290+
<div className="flex h-20 w-full cursor-s-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
291+
Hover me
292+
</div>
293+
</div>
294+
<div className="flex flex-col items-center">
295+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-w-resize</p>
296+
<div className="flex h-20 w-full cursor-w-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
297+
Hover me
298+
</div>
299+
</div>
300+
<div className="flex flex-col items-center">
301+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-ne-resize</p>
302+
<div className="flex h-20 w-full cursor-ne-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
303+
Hover me
304+
</div>
305+
</div>
306+
<div className="flex flex-col items-center">
307+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-nw-resize</p>
308+
<div className="flex h-20 w-full cursor-nw-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
309+
Hover me
310+
</div>
311+
</div>
312+
<div className="flex flex-col items-center">
313+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-se-resize</p>
314+
<div className="flex h-20 w-full cursor-se-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
315+
Hover me
316+
</div>
317+
</div>
318+
<div className="flex flex-col items-center">
319+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-sw-resize</p>
320+
<div className="flex h-20 w-full cursor-sw-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
321+
Hover me
322+
</div>
323+
</div>
324+
<div className="flex flex-col items-center">
325+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-ew-resize</p>
326+
<div className="flex h-20 w-full cursor-ew-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
327+
Hover me
328+
</div>
329+
</div>
330+
<div className="flex flex-col items-center">
331+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-ns-resize</p>
332+
<div className="flex h-20 w-full cursor-ns-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
333+
Hover me
334+
</div>
335+
</div>
336+
<div className="flex flex-col items-center">
337+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-nesw-resize</p>
338+
<div className="flex h-20 w-full cursor-nesw-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
339+
Hover me
340+
</div>
341+
</div>
342+
<div className="flex flex-col items-center">
343+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-nwse-resize</p>
344+
<div className="flex h-20 w-full cursor-nwse-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
345+
Hover me
346+
</div>
347+
</div>
348+
<div className="flex flex-col items-center">
349+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-col-resize</p>
350+
<div className="flex h-20 w-full cursor-col-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
351+
Hover me
352+
</div>
353+
</div>
354+
<div className="flex flex-col items-center">
355+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-row-resize</p>
356+
<div className="flex h-20 w-full cursor-row-resize items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
357+
Hover me
358+
</div>
359+
</div>
360+
<div className="flex flex-col items-center">
361+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-all-scroll</p>
362+
<div className="flex h-20 w-full cursor-all-scroll items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
363+
Hover me
364+
</div>
365+
</div>
366+
</div>
367+
}
368+
</Example>
369+
370+
```html
371+
<!-- [!code classes:cursor-n-resize,cursor-e-resize,cursor-s-resize,cursor-w-resize,cursor-ne-resize,cursor-nw-resize,cursor-se-resize,cursor-sw-resize,cursor-ew-resize,cursor-ns-resize,cursor-nesw-resize,cursor-nwse-resize,cursor-col-resize,cursor-row-resize,cursor-all-scroll] -->
372+
<div class="cursor-n-resize ...">Hover me</div>
373+
<div class="cursor-e-resize ...">Hover me</div>
374+
<div class="cursor-s-resize ...">Hover me</div>
375+
<div class="cursor-w-resize ...">Hover me</div>
376+
<div class="cursor-ne-resize ...">Hover me</div>
377+
<div class="cursor-nw-resize ...">Hover me</div>
378+
<div class="cursor-se-resize ...">Hover me</div>
379+
<div class="cursor-sw-resize ...">Hover me</div>
380+
<div class="cursor-ew-resize ...">Hover me</div>
381+
<div class="cursor-ns-resize ...">Hover me</div>
382+
<div class="cursor-nesw-resize ...">Hover me</div>
383+
<div class="cursor-nwse-resize ...">Hover me</div>
384+
<div class="cursor-col-resize ...">Hover me</div>
385+
<div class="cursor-row-resize ...">Hover me</div>
386+
<div class="cursor-all-scroll ...">Hover me</div>
387+
```
388+
389+
</Figure>
390+
391+
### Zoom and state cursors
392+
393+
Use zoom cursor utilities and state indicators:
394+
395+
<Figure hint="Hover over each box to see the cursor change">
396+
397+
<Example>
398+
{
399+
<div className="grid grid-cols-2 gap-4 text-center sm:grid-cols-3">
400+
<div className="flex flex-col items-center">
401+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-zoom-in</p>
402+
<div className="flex h-20 w-full cursor-zoom-in items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
403+
Hover me
404+
</div>
405+
</div>
406+
<div className="flex flex-col items-center">
407+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-zoom-out</p>
408+
<div className="flex h-20 w-full cursor-zoom-out items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
409+
Hover me
410+
</div>
411+
</div>
412+
<div className="flex flex-col items-center">
413+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-not-allowed</p>
414+
<div className="flex h-20 w-full cursor-not-allowed items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
415+
Hover me
416+
</div>
417+
</div>
418+
<div className="flex flex-col items-center">
419+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-auto</p>
420+
<div className="flex h-20 w-full cursor-auto items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
421+
Hover me
422+
</div>
423+
</div>
424+
<div className="flex flex-col items-center">
425+
<p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">cursor-none</p>
426+
<div className="flex h-20 w-full cursor-none items-center justify-center rounded-md bg-indigo-500 text-sm font-semibold text-white dark:bg-sky-500">
427+
Hover me
428+
</div>
429+
</div>
430+
</div>
431+
}
432+
</Example>
433+
434+
```html
435+
<!-- [!code classes:cursor-zoom-in,cursor-zoom-out,cursor-not-allowed,cursor-auto,cursor-none] -->
436+
<div class="cursor-zoom-in ...">Hover me</div>
437+
<div class="cursor-zoom-out ...">Hover me</div>
438+
<div class="cursor-not-allowed ...">Hover me</div>
439+
<div class="cursor-auto ...">Hover me</div>
440+
<div class="cursor-none ...">Hover me</div>
441+
```
442+
443+
</Figure>
444+
98445
### Using a custom value
99446

100447
<UsingACustomValue element="button" utility="cursor" value="url(hand.cur),_pointer" />

0 commit comments

Comments
 (0)