144 lines
3.9 KiB
Markdown
144 lines
3.9 KiB
Markdown
# 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)
|
||
```html
|
||
<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.
|
||
|
||
```javascript
|
||
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
|
||
|
||
```javascript
|
||
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.*
|