# Installation Guide
Follow these steps to integrate **SigPro-UI** into your project.
---
!> **📘 Core Concepts**
SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
---
## 1. Install the packages
```bash
# ESM / Bundler (tree-shaking)
npm install sigpro sigpro-ui
# Or with bun
bun add sigpro sigpro-ui
```
## 2. Import and use in your app
### ESM / Module usage (tree-shaking)
```javascript
import { $, watch, h, mount } from "sigpro";
import { Button, Input, Alert, Toast, tt } from "sigpro-ui";
import "sigpro-ui/css";
const App = () => {
const count = $(0);
return h('div', { class: 'p-8 max-w-md mx-auto' }, [
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
placeholder: 'Enter your name...'
}),
Button({
class: 'btn-primary mt-4',
onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`),
Alert({
class: 'alert-success',
message: () => `Welcome to SigProUI!`
})
]);
};
mount(App, "#app");
```
### CDN Usage (no build step - all-in-one)
```html
SigProUI Demo
```
## What's included?
### SigPro Core Functions
- `$()` - Reactive signals
- `watch()` - Watch reactive dependencies
- `h()` - Create HTML elements with reactivity
- `when()` - Conditional rendering
- `each()` - List rendering
- `mount()` - Mount components to DOM
> For more information about SigPro Core visit official Docs [SigPro Docs](https://sigpro.natxocc.com/#/)
### UI Components
- `Button()` - Styled button with DaisyUI
- `Input()` - Form input with floating labels
- `Alert()` - Alert messages
- `Modal()` - Modal dialogs
- `Table()` - Data tables
- `Tabs()` - Tabbed interfaces
- `Toast()` - Toast notifications
- And 30+ more components!
### Utilities
- `tt()` - i18n translation function
## Language Support
SigProUI includes built-in i18n with Spanish and English:
```javascript
import { tt, Locale } from 'sigpro-ui';
// Change locale (default is 'es')
Locale('en');
// Use translations
Button({}, tt('close'));
Input({ placeholder: tt('search') });
```
## TypeScript Support
SigProUI includes TypeScript definitions:
```typescript
import { $ } from 'sigpro';
import { Button, Input, Toast } from 'sigpro-ui';
import type { ButtonProps, InputProps } from 'sigpro-ui';
```
## Troubleshooting
| Problem | Solution |
| :--- | :--- |
| Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) |
| `$ is not defined` | ESM: import from `sigpro`. CDN: functions are in global scope |
| `Button is not defined` | ESM: `import { Button } from 'sigpro-ui'`. CDN: available globally |
| Build errors | Install both `sigpro` and `sigpro-ui` |
| CDN functions not working | All core functions (`$`, `h`, `watch`, etc.) are available globally |
| Locale not working | Set locale with `Locale('en')` before using translations |
**Happy coding!** 🎉