The example shows how to use the `useDesignerTool` and `useSetDesignerTool` hooks to switch between **hand** mode and **move** mode.

Use the Cursor and Hand buttons in the toolbar to switch.

## Switching Tools Programmatically

Use the `useSetDesignerTool` hook to change tools programmatically:

```tsx
import { useDesignerTool, useSetDesignerTool } from "@shadcn/designer"
import { Button } from "@/components/ui/button"

function CustomToolSwitcher() {
  const tool = useDesignerTool()
  const setTool = useSetDesignerTool()

  return (
    <div className="flex gap-2">
      <Button onClick={() => setTool("move")}>
        Move
      </Button>
      <Button onClick={() => setTool("hand")}>
        Hand
      </Button>
    </div>
  )
}
```

## API Reference

For more details on the hooks, see the [Hooks Reference](/docs/reference/hooks#usedesignertool).