natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Independent sigpro vs sigpro-ui
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-05-04 16:39:57 +02:00
parent 817de6a0ee
commit e6b172efa1
26 changed files with 1596 additions and 2368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/install.md
View File

@@ -5,7 +5,7 @@ Follow these steps to integrate **SigPro-UI** into your project.
---
!> **📘 Core Concepts**
SigProUI is built on top of the `SigPro` reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
SigProUI is based on the `SigPro` reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
---
@@ -13,10 +13,10 @@ SigProUI is built on top of the `SigPro` reactive core. To learn how to create s
```bash
# ESM / Bundler (tree-shaking)
npm install sigpro-ui
npm install sigpro sigpro-ui
# Or with bun
bun add sigpro-ui
bun add sigpro sigpro-ui
```
## 2. Import and use in your app
@@ -24,7 +24,8 @@ bun add sigpro-ui
### ESM / Module usage
```javascript
import { $, Input, Button, Alert } from "sigpro-ui";
import { $ } from "sigpro"; // Core functions
import { Input, Button, Alert } from "sigpro-ui"; // Components
import "sigpro-ui/css";
const App = () => {
@@ -61,6 +62,7 @@ mount(App, "#app");
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SigProUI Demo</title>
<!-- Load CSS -->
<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
<style>
body { padding: 2rem; }
@@ -68,7 +70,8 @@ mount(App, "#app");
</head>
<body>
<div id="app"></div>
<!-- Load sigpro and sigpro-ui -->
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro.min.js"></script>
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
<script>
const App = () => {
@@ -133,10 +136,10 @@ mount(App, "#app");
SigProUI includes built-in i18n with Spanish and English:
```javascript
import { t, Locale } from 'sigpro-ui';
import { t, setLocale } from 'sigpro-ui';
// Change locale (default is 'es')
Locale('en');
setLocale('en');
// Use translations
Button({}, t('close'));
@@ -158,6 +161,6 @@ import type { ButtonProps, InputProps } from 'sigpro-ui';
| :--- | :--- |
| Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) |
| CDN functions not working | All core functions (`$`, `h`, `watch`, etc.) are available globally |
| Locale not working | Set locale with `Locale('en')` before using translations |
| setLocale not working | Set locale with `setLocale('en')` before using translations |
**Happy coding!** 🎉