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

npm install sigpro sigpro-ui
# or
bun add sigpro sigpro-ui

CDN (Browser - All-in-One)

<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)

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)

<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

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
Button({}, tt('close'));
Input({ placeholder: tt('search') });

Readme.md

SigPro UI