> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/webcomponents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/webcomponents/installation.md).

# Installation

WireBootstrap for Web Components and it's source are available in GitHub at <https://github.com/WireBootstrap/webcomponents>.

```git
git clone https://github.com/WireBootstrap/webcomponents
```

The source code includes a sample project that demonstrates how to use WireBootstrap with Web Components to build applications.&#x20;

All source is compiled into a single file `wire-webcomponents.js` which can be installed directly by itself from an NPM package.

```
npm install @wirebootstrap/wire-webcomponents
```

## Sample

There is a sample application in the GitHub project located at `\sample`. &#x20;

To run the sample, first install the dependent npm packages using `npm init`from a command console.

```
npm init
```

Next, open the first page of the application using `npm run start`.

```
npm run start
```

## Tinybind

The WireBootstrap for Web Components solution has a dependency on [Tinybind](https://blikblum.github.io/tinybind/).  Tinybind is used for two-way attribute data binding for the objects managed by WireBootstrap in web components.&#x20;

{% hint style="info" %}
Note, WireBootstrap for Web Components changes the default `rv-*` prefix to `wr-*` for use in WireBootstrap applications.
{% endhint %}

Tinybind is automatically installed with WireBootstrap for Web Components when using the npm package.

## Libraries

Reference the libraries for the solution on pages or in build configurations in dependency order.&#x20;

Reference the Tinybind library before the [core WireBootstrap library](https://docs.wirebootstrap.com/wirebootstrap/overview).  Similarly, reference the WireBootstrap for Web Components library after the core WireBootstrap library.

```html
<script src="../node_modules/tinybind/dist/tinybind.min.js"></script>
<script src="../node_modules/@wirebootstrap/wire/wire.js"></script>
<script src="../node_modules/@wirebootstrap/wire-webcomponents/wire-webcomponetns.js"></script>
```