# 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 – Use named imports for the core, activate helpers if needed
import { $, mount } from 'sigpro';
import 'sigpro/tags'; // ← make div, h1, button, etc. global
import 'sigpro/xss'; // ← optional: activate XSS shield
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"
),
]);
};
mount(App, '#app');
```
```html
```
---
## 3. Global by Design (Two Modes)
SigPro gives you full control over global pollution.
### Mode A: Classic (IIFE) – Full Auto‑injection
When you load the **IIFE full bundle** (`sigpro.min.js`) with a traditional `