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 leveraging the power of Tailwind CSS v4 and daisyUI v5.

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.
DaisyUI v5 Integration: Beautiful, semantic components 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 a focus on performance.

Prerequisites

To use SigPro UI, your project must include:

SigPro Core: npm install sigpro (or via CDN).
Tailwind CSS v4: For utility-first styling.
daisyUI v5: The component engine for Tailwind.

1. Prerequisites & Installation

SigPro UI is built as an extension of the SigPro reactivity system. You need to install the core library first.

Step 1: Install SigPro Core

bun add sigpro
# or
npm install sigpro

Step 2: Install SigPro UI

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

Via CDN (Browser)

<script src="https://unpkg.com/sigpro"></script>
<script src="https://unpkg.com/sigpro-ui"></script>

2. Styling Setup (Tailwind CSS v4)

SigPro UI components rely on Tailwind CSS and daisyUI for styling. You don't need a complex tailwind.config.js; simply configure your main CSS entry point.

Create or edit your global CSS file (e.g., style.css):

/* src/style.css */
@import "tailwindcss";
@plugin "daisyui";

/* Optional: Your custom theme overrides */
:root {
  --primary: #570df8;
  --secondary: #f000b8;
}

Setup & Usage

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

1. Modular Approach (Tree Shaking)

Import only the components you need. This keeps your bundle small.

import { $, $mount } from "sigpro";
import { Button, Modal, Table } from "sigpro-ui";

const App = () => {
  const show = $(false);
  return Button({ onclick: () => show(true) }, "Open Modal");
};

$mount(App, "#app");

2. Global Approach (Zero-Import)

Inject all components and utilities into the window object. This makes all components available everywhere without manual imports.

import SigproUI from "sigpro-ui";

// Injects Button, Table, Input, Icons, Utils, 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()}`)
  ]);
};

Components Included

Category	Components
Form	`Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`
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`

Readme.md

SigPro UI (W.I.P.)