Full Pure reactive JS UI +40 components in less than 35 KB!

# SigPro UI

[![npm version](https://img.shields.io/npm/v/sigpro-ui.svg)](https://www.npmjs.com/package/sigpro)
[![brotli size](https://img.shields.io/bundlejs/size/sigpro-ui?compression=brotli)](https://bundlejs.com/?q=sigpro-ui)
![CSS Size](https://img.shields.io/badge/css_size-21.9_kB_brotli-blue)
[![license](https://img.shields.io/npm/l/sigpro-ui)](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 + reactive core in under **35KB gzip** (< 13KB JS + < 22KB 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
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
```

**That's it!** The CDN version includes SigPro core internally - no additional scripts needed.

---

## Usage

### ESM / Modular (Tree Shaking)

```javascript
import { $, mount, watch, h } from "sigpro";
import { Button, Modal, Input, Alert } from "sigpro-ui";
import "sigpro-ui/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
<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

> [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
- `tt()` - i18n translation function (ES/EN)
- `Locale()` - Set global language

---

## Language Support

Built-in i18n with Spanish and English:

```javascript
import { tt, Locale } from "sigpro-ui";

// Change locale (default is 'es')
Locale('en');

// Use translations
Button({}, tt('close'));
Input({ placeholder: tt('search') });
```

---

## License

MIT © 2026 **SigPro Team**  
*Engineered for speed, designed for clarity, built for the modern web.*