# Target Cursor · Pro

Four corner brackets spin slowly around the pointer and lock onto any hovered link or button, springing to its bounds. The spin stops while locked so the brackets sit square.

This is a Charcoal UI Pro component. Its source and examples are available with a Pro seat: https://charcoalui.com/pricing

## With a Pro seat

1. Add the registry to components.json:

```json
{
  "registries": {
    "@charcoal": {
      "url": "https://charcoalui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${CHARCOAL_LICENSE_KEY}"
      }
    }
  }
}
```

2. Copy your licence key from https://charcoalui.com/dashboard and put it in .env.local as CHARCOAL_LICENSE_KEY, then:

```bash
npx shadcn@latest add @charcoal/target-cursor
```

To read Pro source through this MCP server, reconnect it with the header "Authorization: Bearer <licence key>".

## API — Target Cursor
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Links, buttons and [data-cursor] elements inside are lock targets. |
| `size` | `number` | `36` | Side of the idle reticle in px. |
| `spinDuration` | `number` | `6` | Seconds per idle rotation. |
| `color` | `string` | `"var(--foreground)"` |  |
| `hideCursor` | `boolean` | `false` | Hide the native cursor inside the area. |
| `className` | `string` | — |  |

See it live: https://charcoalui.com/docs/components/target-cursor