diff --git a/Readme.md b/Readme.md
index 06b7755..1aae81c 100644
--- a/Readme.md
+++ b/Readme.md
@@ -2,7 +2,7 @@
**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, self-contained UI library + reactive core in under **45KB gzip** (<15KB JS + <30KB CSS). 🎉
+**SigPro UI** is a complete, full self-contained UI library + reactive core in under **35KB gzip** (< 13KB JS + < 22KB 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.
@@ -13,48 +13,46 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
- **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
+- **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
-### Via NPM
+### ESM / Bundler
```bash
-npm install sigpro-ui
+npm install sigpro sigpro-ui
+# or
+bun add sigpro sigpro-ui
```
-### Via CDN (Browser)
+### CDN (Browser - All-in-One)
```html
-
-
-
+
+
```
-**That's it!** No additional CSS files, no configuration, no build step. SigPro core is included internally.
+**That's it!** The CDN version includes SigPro core internally - no additional scripts needed.
---
## 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:
+### ESM / Modular (Tree Shaking)
```javascript
-import { $, mount, Button, Modal, Input, Alert } from "sigpro-ui";
+import { $, mount, watch, h } from "sigpro";
+import { Button, Modal, Input, Alert } from "sigpro-ui";
import "sigpro-ui/css";
const App = () => {
const show = $(false);
- return button(
+ return Button(
{
class: "btn-primary",
onclick: () => show(true)
@@ -66,61 +64,44 @@ const App = () => {
mount(App, "#app");
```
-### 2. Global Approach (Zero-Import)
+### CDN / Global (All-in-One)
-Inject all components into the `window` object:
+```html
+
+
```
---
## What's Included?
-### Core Functions (from SigPro)
+### Core Functions (SigPro)
- `$()` - Reactive signals
-- `watch()` - watch reactive dependencies
+- `watch()` - Watch reactive dependencies
- `h()` - Create HTML elements with reactivity
- `when()` - Conditional rendering
- `each()` - List rendering
-- `router()` - Hash-based routing
-- `mount()` - mount components to DOM
+- `mount()` - Mount components to DOM
-Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information.
+> [SigPro Core Docs](https://sigpro.natxocc.com/#/)
### UI Components
- `Button`, `Input`, `Select`, `Checkbox`, `Radio`
@@ -148,7 +129,8 @@ import { tt, Locale } from "sigpro-ui";
Locale('en');
// Use translations
-const closeButton = button({}, tt('close')());
+Button({}, tt('close'));
+Input({ placeholder: tt('search') });
```
---