# Installation & Setup
SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.
## 1. Installation
Choose the method that best fits your workflow:
```bash
npm install sigpro
```
```bash
pnpm add sigpro
```
```bash
yarn add sigpro
```
```bash
bun add sigpro
```
```html
```
```html
```
---
## 2. Quick Start Examples
SigPro uses **lowercase** Tag Helpers (e.g., `div`, `button`) to keep the syntax close to raw HTML, while still being pure JavaScript functions.
```javascript
// App.js – Using named imports (recommended)
import { $, h1, button, div, mount } from 'sigpro';
export const App = () => {
const count = $(0);
return div({ class: "card p-4" }, [
h1(() => `Count is: ${count()}`),
button(
{ class: "btn btn-primary", onclick: () => count(count() + 1) },
"Increment"
),
]);
};
// main.js
import { mount } from 'sigpro';
import { App } from './App.js';
mount(App, '#app');
```
```html
```
---
## 3. Global by Design (Two Modes)
SigPro gives you full control over global pollution.
### Mode A: Classic (IIFE) – Auto‑injection
When you load the **IIFE bundle** (`sigpro.js`) with a traditional `