# Installation Guide
Follow these steps to integrate **SigPro-UI** into your project.
## Prerequisites
- [Tailwind CSS v4](https://tailwindcss.com/) configured.
- [daisyUI v5](https://daisyui.com/) installed.
---
!> **📘 Core Concepts**
**Note:** SigPro-UI now includes SigPro core internally. You no longer need to install SigPro separately.
SigProUI is built on top of the [SigPro](https://natxocc.github.io/sigpro/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://natxocc.github.io/sigpro/#/). It covers everything you need to build reactive applications with signals, computed values, and effects.
---
## 1. Install the package
Choose your preferred package manager:
```bash
npm install sigpro-ui
# or
pnpm add sigpro-ui
# or
bun add sigpro-ui
# or
yarn add sigpro-ui
```
## 2. Configure CSS
Add the following to your main CSS file (e.g., `app.css`):
```css
@import "tailwindcss";
@plugin "daisyui";
```
> This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.
## 3. Import and use in your app
### ESM / Module usage
```javascript
// Import everything from sigpro-ui (includes sigpro core)
import { $, $mount, Button, Alert, Input, tt } from "sigpro-ui";
// Import your CSS (adjust the path if needed)
import "./app.css";
// Create your app
const App = () => {
const count = $(0);
return $html('div', { class: 'p-8 max-w-md mx-auto' }, [
$html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
label: 'Your name',
placeholder: 'Enter your name...'
}),
Button({
class: 'btn-primary mt-4',
onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`),
Alert({
type: 'success',
message: () => `Welcome to SigProUI!`
})
]);
};
// Mount your app
$mount(App, "#app");
```
### CommonJS usage
```javascript
const { $, $mount, Button, Input, Alert } = require('sigpro-ui');
const App = () => {
const count = $(0);
return $html('div', { class: 'p-8' }, [
Button({
class: 'btn-primary',
onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`)
]);
};
$mount(App, "#app");
```
## 4. CDN Usage (no build step)
Simply add the script tag and start using SigProUI:
```html
SigProUI Demo
```
## What's included?
When you install SigProUI, you get:
### SigPro Core Functions
- `$()` - Reactive signals
- `$watch()` - Watch reactive dependencies
- `$html()` - Create HTML elements with reactivity
- `$if()` - Conditional rendering
- `$for()` - List rendering
- `$router()` - Hash-based routing
- `$mount()` - Mount components to DOM
### 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
- And 30+ more components!
### Utilities
- `Icons` - SVG icon set
- `Utils` - Helper functions (joinClass, val)
- `tt()` - i18n translation function
## Language Support
SigProUI includes built-in i18n with Spanish and English:
```javascript
import { tt } from 'sigpro-ui';
// Change locale (default is 'es')
tt.setLocale('en');
// Use translations
const closeButton = Button({}, tt('close')());
const searchPlaceholder = Input({ placeholder: tt('search')() });
```
Available translations: `close`, `confirm`, `cancel`, `search`, `loading`, `nodata`
## TypeScript Support
SigProUI includes TypeScript definitions. Import types as needed:
```typescript
import { Button, Input, type ButtonProps, type InputProps } from 'sigpro-ui';
const MyButton: React.FC = (props) => {
return Button(props, 'Click me');
};
```
## Troubleshooting
| Problem | Solution |
| :--- | :--- |
| Components don't look styled | Check that you've included Tailwind + daisyUI CSS (either via import or CDN) |
| `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' |
| `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window |
| Build errors | Ensure you're using a modern bundler that supports ESM |
| CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly |
| Locale not working | Set locale with `tt.setLocale('en')` before using translations |
## Migration from older versions
If you were using SigProUI v1.0.x with separate SigPro installation:
**Before:**
```javascript
import { $ } from 'sigpro';
import { Button } from 'sigpro-ui';
```
**Now:**
```javascript
import { $, Button } from 'sigpro-ui';
// That's it! Everything comes from one package.
```
**Happy coding!** 🎉