> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cosmos.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Component

For non-React applications, the Skip Go `Widget` is available as a web component.

# Installation

You can import the web component in two ways:

## 1. NPM

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
import('@skip-go/widget-web-component');
```

<Info>
  Note: Ensure Node has sufficient memory allocated: `CopyNODE_OPTIONS=--max-old-space-size=32384`
  This can be added to npm scripts in `package.json`, a `.env file`, or used when running Node directly.
</Info>

## 2. Script Tag or CDN (Recommended)

```html theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
<body>
  <script
    async
    src="https://unpkg.com/@skip-go/widget-web-component/build/index.js"
    type="module"
  ></script>
</body>
```

## Usage

Props are the exact same as [`WidgetProps`](./configuration) but you are required to pass them to the element via javascript/typescript.

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
<div style="width:100%; max-width:500px; padding:0 10px;">
  <skip-widget></skip-widget>
</div>
<script>
  const skipWidget = document.querySelector("skip-widget");
  if (skipWidget) {
    skipWidget.theme = {
      brandColor: "#FF4FFF",
      borderRadius: 30,
    };
    skipWidget.defaultRoute = {
      srcChainId: "osmosis-1",
      srcAssetDenom: "ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4",
    }
  }
</script>
```

## Performance Considerations

It's recommended to lazy load this component as it comes pre-bundled with all dependencies, which may impact load times, especially in development environments.
