130 lines
2.8 KiB
Markdown
130 lines
2.8 KiB
Markdown
# 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
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"sigpro": "https://esm.run/sigpro",
|
||
"sigpro-ui": "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm"
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
@import "tailwindcss";
|
||
@plugin "daisyui";
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app"></div>
|
||
<script type="module">
|
||
import { $, $mount } from "sigpro";
|
||
import { UI, Div, Button, Alert } from "sigpro-ui";
|
||
|
||
UI("en");
|
||
|
||
const App = () => Div({ class: "p-4" }, [
|
||
Button({ class: "btn-primary", onclick: () => Alert("Hello!") }, "Click")
|
||
]);
|
||
|
||
$mount(App, "#app");
|
||
</script>
|
||
</body>
|
||
</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!** 🎉
|
||
|