# Installation Guide
Follow these steps to integrate **SigPro-UI** into your project.
## Prerequisites
Make sure your project already has:
- [SigPro Core](https://www.npmjs.com/package/sigpro) installed.
- [Tailwind CSS v4](https://tailwindcss.com/) configured.
- [daisyUI v5](https://daisyui.com/) installed.
## 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 initialize in your app
Create or update your `main.js` (or `index.js`):
```javascript
// Import required modules
import { $, $mount } from "sigpro";
import { UI } from "sigpro-ui";
// Import your CSS (adjust the path if needed)
import "./app.css";
// Import your main App component
import { App } from "./App.js";
// Initialize SigPro-UI (English locale)
UI("en");
// Mount your app
$mount(App, "#app");
```
## 4️.Create your first component
Example `App.js`:
```javascript
import { Div, Button, Alert } from "sigpro-ui";
export const App = () => {
return Div({ class: "p-4" }, [
Button({
class: "btn-primary",
onclick: () => Alert("Hello SigPro-UI!")
}, "Click Me")
]);
};
```
## Optional: Use CDN (no build step)
If you prefer not to use a build step, you can import directly from a CDN:
```html
```
## Troubleshooting
| Problem | Solution |
| :--- | :--- |
| Components don't look styled | Check that `app.css` is imported and contains the Tailwind + daisyUI directives. |
| `UI is not defined` | Make sure you call `UI()` **before** using any component like `Button`, `Input`, etc. |
| Locale not working | Verify you passed a valid locale (`"es"` or `"en"`) to `UI()`. |
| Build errors with Tailwind v4 | Ensure Tailwind CSS v4 and daisyUI v5 are correctly installed and configured. |
**Happy coding!** 🎉