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

SigPro UI

Explore the Docs →

Based in SigPro Core Explore the Core Docs →

SigPro UI is a lightweight (<35KB JS+CSS), 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

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

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

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)

<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

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:

import { t, setLocale } from "sigpro-ui";

// Change locale
setLocale('en');

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

---

License

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