SigPro UI

Explore the Docs →

Based in SigPro Core Explore the Core Docs →

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

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 { tt, setLocale } from "sigpro-ui";

// Change locale
setLocale('en');

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

4.2 KiB Raw Blame History