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 core + UI with styles included -->
<script src="https://unpkg.com/sigpro"></script>
<script src="https://unpkg.com/sigpro-ui"></script>

That's it! No additional CSS files, no configuration, no build step.

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 } from "sigpro";
import { Button, Modal, Input, Alert } from "sigpro-ui";

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 SigproUI from "sigpro-ui";

// Injects Button, Table, Input, Alert, etc. into window
SigproUI.install(); 

// Now you can use them directly anywhere:
const myApp = () => Table({ items: [], columns: [] });

Basic Example

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

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

Components Included

Category	Components
Form	`Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`, `Fileinput`
Data	`Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator`
Layout	`Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion`
Feedback	`Alert`, `Modal`, `Toast`, `Loading`, `Tooltip`
Interaction	`Button`, `Dropdown`, `Swap`, `Fab`

Component Examples

Form with validation

import { Input, Button } from "sigpro-ui";

const email = $("");

Input({
  type: "email",
  value: email,
  placeholder: "your@email.com",
  validate: (v) => !v.includes("@") ? "Invalid email" : null
});

Datepicker with range

import { Datepicker } from "sigpro-ui";

const dateRange = $(null);

Datepicker({ 
  range: true, 
  value: dateRange,
  hour: true  // Include time selection
});

File upload with drag & drop

import { Fileinput } from "sigpro-ui";

Fileinput({
  max: 5,  // Max size in MB
  accept: "image/*",
  onSelect: (files) => console.log(files)
});

Styling Customization

SigPro UI comes with Tailwind CSS v4 + daisyUI v5 pre-bundled. You can customize the theme by overriding CSS variables:

/* Override default theme colors */
:root {
  --color-primary: oklch(45% .24 277.023);
  --color-secondary: oklch(65% .241 354.308);
  --color-accent: oklch(77% .152 181.912);
}

/* Or use data attributes for dark/light mode */
[data-theme="dark"] {
  --color-base-100: oklch(25.33% .016 252.42);
  --color-primary: oklch(58% .233 277.117);
}

Readme.md

SigPro UI