---
title: Script
description: Use the `Script` component to add third-party scripts to your app. It automatically adds a nonce attribute from your [content security policy](/docs/custom-storefronts/hydrogen/content-security-policy).
api_version: 2023-07
api_name: hydrogen
source_url:
html: https://shopify.dev/docs/api/hydrogen/2023-07/components/script
md: https://shopify.dev/docs/api/hydrogen/2023-07/components/script.md
---
# Scriptcomponent
Use the `Script` component to add third-party scripts to your app. It automatically adds a nonce attribute from your [content security policy](https://shopify.dev/docs/custom-storefronts/hydrogen/content-security-policy).
## Props
`JSX.IntrinsicElements['script']`
### Examples
* #### Example code
##### Description
I am the default example
##### JavaScript
```jsx
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import {useNonce, Script} from '@shopify/hydrogen';
export default function App() {
const nonce = useNonce();
return (
{/* Note you don't need to pass a nonce to the script component
because it's automatically added */}
);
}
```
##### TypeScript
```tsx
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import {useNonce, Script} from '@shopify/hydrogen';
export default function App() {
const nonce = useNonce();
return (
{/* Note you don't need to pass a nonce to the script component
because it's automatically added */}
);
}
```
## Related
[](https://shopify.dev/docs/api/hydrogen/2023-07/utilities/createcontentsecuritypolicy)
[createContentSecurityPolicy](https://shopify.dev/docs/api/hydrogen/2023-07/utilities/createcontentsecuritypolicy)
[](https://shopify.dev/docs/api/hydrogen/2023-07/hooks/usenonce)
[useNonce](https://shopify.dev/docs/api/hydrogen/2023-07/hooks/usenonce)