SigPro UI (W.I.P.)

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:

1. SigPro Core: npm install sigpro (or via CDN).
2. Tailwind CSS v4: For utility-first styling.
3. 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

´´´Bash bun add sigpro

or

npm install sigpro

### Step 2: Install SigPro UI

```Bash
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):

´´´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.

```javascript
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

---

License

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