Make your AI a shadcn expert

React useScript Hook

React useScript hook for dynamically loading external scripts. Load status tracking, caching, SSR safe. TypeScript ready.

React useScript Hook preview

Scroll to load preview

Load external JavaScript files dynamically with useScript. Pass a URL and get loading status: idle, loading, ready, or error. Scripts are cached globally so multiple components requesting the same script share one network request. Existing scripts are detected and reused automatically. Options for conditional loading, custom script IDs, and cleanup on unmount. Perfect for third-party integrations like analytics, maps, payments, or social widgets. SSR safe—scripts only load client-side. Works with Next.js App Router and any React framework. Handles race conditions and duplicate script tags gracefully.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:

use shadcnio to install the use-script hook into my project

FAQ

Was this page helpful?

Sign in to leave feedback.