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.

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: Import only what you need
Zero-Import Option: Inject all components into the global scope with one command
Lightweight: Minimal footprint with everything bundled

Installation

Via NPM

npm install sigpro-ui

Via CDN (Browser)

<!-- SigPro UI with styles included -->
<script src="https://unpkg.com/sigpro-ui"></script>
<link href="https://unpkg.com/sigpro-ui/css" rel="stylesheet">

That's it! No additional CSS files, no configuration, no build step. SigPro core is included internally.

Usage

You can use SigPro UI in two ways: Modular (Recommended) or Global (Fastest for prototyping).

1. Modular Approach (Tree Shaking)

Import only the components you need:

import { $, $mount, 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");

2. Global Approach (Zero-Import)

Inject all components into the window object:

import "sigpro-ui";
import "sigpro-ui/css";

// All components (Button, Table, Input, Alert, etc.) are now globally available.
// No need to import anything else!

const myApp = () => Table({ items: [], columns: [] });

Basic Example

import { $, $mount, Button, Toast, Div, H1 } from "sigpro-ui";
import "sigpro-ui/css";

const App = () => {
  const count = $(0);

  return Div({ class: "p-10 flex flex-col gap-4" }, [
    H1({ class: "text-2xl font-bold" }, "Welcome to SigPro UI"),
    
    Button({ 
      class: "btn-primary", 
      onclick: () => {
        count(c => c + 1);
        Toast(`Count is now ${count()}`, "alert-success");
      }
    }, () => `Clicks: ${count()}`)
  ]);
};

$mount(App, "#app");

What's Included?

Core Functions (from SigPro)

$() - Reactive signals
$watch() - Watch reactive dependencies
$html() - Create HTML elements with reactivity
$if() - Conditional rendering
$for() - List rendering
$router() - Hash-based routing
$mount() - Mount components to DOM

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:

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

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

// Use translations
const closeButton = Button({}, tt('close')());

Readme.md

SigPro UI