158 lines
4.2 KiB
Markdown
158 lines
4.2 KiB
Markdown
Full Pure reactive JS UI +40 components in less than 35 KB!
|
|
|
|
# SigPro UI
|
|
|
|
[](https://www.npmjs.com/package/sigpro)
|
|
|
|
|
|
[](https://github.com/natxocc/sigpro-ui/blob/main/LICENSE)
|
|
|
|
[**Explore the Docs →**](https://sigpro.natxocc.com/ui/#/)
|
|
|
|
Based in SigPro Core
|
|
[**Explore the Core Docs →**](https://sigpro.natxocc.com/#/)
|
|
|
|
**SigPro UI** is a lightweight, ultra-fast, and reactive component library built for the **SigPro** reactivity core. It provides a set of high-quality, accessible, and themeable UI components with **zero external dependencies** - everything is included.
|
|
|
|
**SigPro UI** is a complete, full self-contained UI library in under **35KB gzip** (JS + CSS). 🎉
|
|
|
|
Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that runs natively in the browser.
|
|
|
|
---
|
|
|
|
## Features
|
|
|
|
- **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates
|
|
- **Self-Contained Styling**: Full CSS included - no external frameworks needed
|
|
- **Built on daisyUI v5**: Modern, utility-first styling out of the box
|
|
- **Tree Shaking Ready**: ESM imports with `sigpro` as external dependency
|
|
- **IIFE All-in-One**: Single script tag for browser usage
|
|
- **Lightweight**: Minimal footprint with everything bundled
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
### ESM / Bundler
|
|
|
|
```bash
|
|
npm install sigpro sigpro-ui
|
|
# or
|
|
bun add sigpro sigpro-ui
|
|
```
|
|
|
|
### CDN (Browser - All-in-One)
|
|
|
|
```html
|
|
<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
|
|
<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>
|
|
```
|
|
|
|
**That's it!** no additional scripts needed.
|
|
|
|
---
|
|
|
|
## Usage
|
|
|
|
### ESM / Modular (Tree Shaking)
|
|
|
|
```javascript
|
|
import { $, mount, watch, h } from "sigpro"; // Core functions
|
|
import { Button, Modal, Input, Alert } from "sigpro-ui"; // Components
|
|
import "sigpro-ui/css"; // CSS
|
|
|
|
const App = () => {
|
|
const show = $(false);
|
|
|
|
return Button(
|
|
{
|
|
class: "btn-primary",
|
|
onclick: () => show(true)
|
|
},
|
|
"Open Modal"
|
|
);
|
|
};
|
|
|
|
mount(App, "#app");
|
|
```
|
|
|
|
### CDN / Global (All-in-One)
|
|
|
|
```html
|
|
<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
|
|
<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 = () => {
|
|
const count = $(0);
|
|
|
|
return h('div', { class: 'p-10 flex flex-col gap-4' }, [
|
|
h('h1', { class: 'text-2xl font-bold' }, 'Welcome to SigPro UI'),
|
|
|
|
Button({
|
|
class: 'btn-primary',
|
|
onclick: () => {
|
|
count(count() + 1);
|
|
Toast(`Count is now ${count()}`, 'alert-success');
|
|
}
|
|
}, () => `Clicks: ${count()}`)
|
|
]);
|
|
};
|
|
|
|
mount(App, '#app');
|
|
</script>
|
|
```
|
|
|
|
---
|
|
|
|
## What's Included?
|
|
|
|
### Core Functions (SigPro)
|
|
- `$()` - Reactive signals
|
|
- `watch()` - Watch reactive dependencies
|
|
- `h()` - Create HTML elements with reactivity
|
|
- `when()` - Conditional rendering
|
|
- `each()` - List rendering
|
|
- `mount()` - Mount components to DOM
|
|
- `batch()` - Batch multiple reactive updates into a single flush
|
|
|
|
> [SigPro Core Docs](https://sigpro.natxocc.com/#/)
|
|
|
|
### UI Components
|
|
- `Button`, `Input`, `Select`, `Checkbox`, `Radio`
|
|
- `Modal`, `Alert`, `Toast`, `Tooltip`
|
|
- `Table`, `List`, `Badge`, `Stat`, `Timeline`
|
|
- `Tabs`, `Accordion`, `Dropdown`, `Drawer`
|
|
- `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`
|
|
- `Fileinput`, `Fab`, `Swap`, `Indicator`
|
|
- And 30+ more!
|
|
|
|
### Utilities
|
|
- `t()` - i18n translation function
|
|
- `setLocale()` - Set global language
|
|
|
|
---
|
|
|
|
## Language Support
|
|
|
|
Built-in i18n with custom language:
|
|
|
|
```javascript
|
|
import { tt, setLocale } from "sigpro-ui";
|
|
|
|
// Change locale
|
|
setLocale('en');
|
|
|
|
// Use translations
|
|
Button({}, t('close'));
|
|
Input({ placeholder: tt('search') });
|
|
```
|
|
|
|
---
|
|
|
|
## License
|
|
|
|
MIT © 2026 **SigPro Team**
|
|
*Engineered for speed, designed for clarity, built for the modern web.*
|