📝 Update documentation

Author: GuiEpi

website/src/pages/docs/cursor.mdx

@@ -1,8 +1,8 @@
-# `<Cursor />` API
+# <a name="cursor-api"></a>`<Cursor />` API
 
 This component will render the cursor.
 
-## Props
+## <a name="props"></a>Props
 
 <table>
   <thead>
@@ -15,35 +15,41 @@ This component will render the cursor.
   </thead>
   <tbody>
     <tr>
-      <td>zIndex</td>
+      <td>[zIndex](#zindex-prop)</td>
       <td>number</td>
       <td>9999</td>
       <td>Z-index of the cursor</td>
     </tr>
     <tr>
-      <td>theme</td>
+      <td>[theme](#theme-prop)</td>
       <td>CursorTheme</td>
       <td>\{}</td>
       <td>Theme configuration for variants and rules</td>
     </tr>
     <tr>
-      <td>defaultColor</td>
+      <td>[scaleOnClick](#scale-on-click-prop)</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Scale cursor on click</td>
+    </tr>
+    <tr>
+      <td>[defaultColor](#default-color-prop)</td>
       <td>string</td>
       <td>auto</td>
       <td>Default HSL color value</td>
     </tr>
   </tbody>
 </table>
 
-### `zIndex` Prop
+### <a name="zindex-prop"></a>`zIndex` Prop
 
 You can change the z-index of the cursor by modifying the `zIndex` prop. Defaults to `9999`.
 
 ```jsx
 <Cursor zIndex={1000} />
 ```
 
-### `theme` Prop
+### <a name="theme-prop"></a>`theme` Prop
 
 The theme prop allows you to customize the cursor's appearance and behavior through variants and rules.
 
@@ -80,27 +86,21 @@ const theme: CursorTheme = {
 
 > It is also possible to add several selectors in this way `selector: ['.custom-element1', '.custom-element2']`
 
-### `defaultColor` Prop
+### <a name="scale-on-click-prop"></a>`scaleOnClick` Prop
 
-Override the default cursor color. The value should be in HSL format.
+If `false`, do not scale cursor when clicking. Defaults to `true`.
 
 ```jsx
-<Cursor defaultColor="349, 80%, 59%" />
+<Cursor scaleOnClick={false} />
 ```
 
-## Default Behavior
-
-The cursor automatically detects and responds to:
+### <a name="default-color-prop"></a>`defaultColor` Prop
 
-- Interactive elements (buttons, links, inputs)
-- Text elements
-- Disabled elements
-- Elements with `role="button"` or `role="link"`
-- Elements with click handlers
+Change the default cursor color. The value should be in **HSL format**. By default, the cursor uses the HSL values from the <a href="https://ui.shadcn.com/colors" target="_blank" rel="noopener noreferrer">Tailwind CSS color palette</a>:
 
-It will adjust its appearance based on the element being hovered:
+- Dark mode: `0 0% 98%` (zinc-50)
+- Light mode: `240 10% 3.9%` (zinc-950)
 
-- Regular elements: small dot
-- Interactive elements: larger dot
-- Text: vertical bar that matches text height
-- Disabled elements: semi-transparent dot
+```jsx
+<Cursor defaultColor="349, 80%, 59%" />
+```

website/src/pages/docs/index.mdx

@@ -1,20 +1,20 @@
-# Getting Started
+# <a name="getting-started"></a>Getting Started
 
 Add a custom animated cursor to your React app with <a href="https://github.com/GuiEpi/react-dot-cursor" target="_blank" rel="noopener noreferrer">react-dot-cursor</a>
 
-### Install with pnpm
+### <a name="install-pnpm"></a>Install with pnpm
 
 ```sh
 pnpm add react-dot-cursor
 ```
 
-### Install with NPM
+### <a name="install-npm"></a>Install with NPM
 
 ```sh
 npm install react-dot-cursor
 ```
 
-## Basic usage
+## <a name="basic-usage"></a>Basic usage
 
 Add the `Cursor` component to your app.
 

website/src/pages/docs/styling.mdx

@@ -1,8 +1,8 @@
-# Styling
+# <a name="styling"></a>Styling
 
-## Color Configuration
+## <a name="color-configuration"></a>Color Configuration
 
-### Using CSS Variables
+### <a name="using-css-variables"></a>Using CSS Variables
 
 You can style the cursor by setting the `--cursor-color` CSS variable. The value should be in **HSL format**.
 
@@ -12,7 +12,7 @@ You can style the cursor by setting the `--cursor-color` CSS variable. The value
 }
 ```
 
-### Dark Mode Support
+### <a name="dark-mode-support"></a>Dark Mode Support
 
 The cursor automatically detects system dark mode preferences and adjusts its color. You can override this behavior:
 
@@ -30,7 +30,64 @@ The cursor automatically detects system dark mode preferences and adjusts its co
 }
 ```
 
-## Variants Styling
+## <a name="default-variants"></a>Default Variants
+
+The cursor comes with predefined variants for common interactions. You can override these in your [theme configuration](#variants-styling):
+
+```tsx
+const defaultVariants: Record<CursorType, CursorVariant> = {
+  default: {
+    style: {
+      scale: 1,
+      borderRadius: '50%',
+      width: 16,
+      height: 16,
+    },
+  },
+  hover: {
+    style: {
+      scale: 1,
+      borderRadius: '50%',
+      width: 30,
+      height: 30,
+    },
+  },
+  text: {
+    style: {
+      scale: 1,
+      width: 3,
+      height: fontSize,
+      borderRadius: '1rem',
+    },
+  },
+  disabled: {
+    style: {
+      scale: 1,
+      borderRadius: '50%',
+      opacity: 0.5,
+      width: 12,
+      height: 12,
+    },
+  },
+};
+```
+
+It automatically detects and responds to:
+
+- Interactive elements (buttons, links, inputs)
+- Text elements
+- Disabled elements
+- Elements with `role="button"` or `role="link"`
+- Elements with click handlers
+
+It will adjust its appearance based on the element being hovered:
+
+- Regular elements: small dot
+- Interactive elements: larger dot
+- Text: vertical bar that matches text height
+- Disabled elements: semi-transparent dot
+
+## <a name="variants-styling"></a>Variants Styling
 
 Each variant can have its own unique styling through the theme configuration:
 
@@ -59,10 +116,17 @@ const theme: CursorTheme = {
       },
     },
   },
+  rules: [
+    {
+      selector: '.custom-element',
+      variant: 'custom',
+      priority: 1,
+    },
+  ],
 };
 ```
 
-## Animation Customization
+## <a name="animation-customization"></a>Animation Customization
 
 The cursor uses Motion for animations. You can customize the animation properties in your variants:
 
@@ -81,10 +145,17 @@ const theme: CursorTheme = {
       },
     },
   },
+  rules: [
+    {
+      selector: '.custom-element',
+      variant: 'custom',
+      priority: 1,
+    },
+  ],
 };
 ```
 
-## CSS Classes
+## <a name="css-classes"></a>CSS Classes
 
 The cursor component provides the following CSS classes for additional styling: