diff --git a/docs/README.md b/docs/README.md
index 3805ffa..8fa294e 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -61,7 +61,7 @@ It eliminates the gap between your data (Signals) and your UI components. Each c
| **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
| **Components** | **SigPro-UI** | 60+ semantic, reactive components. |
| **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. |
-| **Learning Curve** | **Zero** | whenyou know JS and HTML, you know SigPro-UI. |
+| **Learning Curve** | **Zero** | when you know JS and HTML, you know SigPro-UI. |
### Semantic Functionalism
Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes.
diff --git a/docs/install.md b/docs/install.md
index f65b393..eb6ec8c 100644
--- a/docs/install.md
+++ b/docs/install.md
@@ -5,57 +5,55 @@ Follow these steps to integrate **SigPro-UI** into your project.
---
!> **📘 Core Concepts**
-**Note:** SigPro-UI now includes SigPro core internally. No need to install SigPro separately.
- SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/). It covers everything you need to build reactive applications with signals, computed values, and effects.
+SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
+
---
-## 1. Install the package
-
-Choose your preferred package manager:
+## 1. Install the packages
```bash
-npm install sigpro-ui
+# ESM / Bundler (tree-shaking)
+npm install sigpro sigpro-ui
+
+# Or with bun
+bun add sigpro sigpro-ui
```
## 2. Import and use in your app
-### ESM / Module usage
+### ESM / Module usage (tree-shaking)
```javascript
-// Import everything from sigpro-ui (includes sigpro core)
-import { $, mount, Button, Alert, Input, tt } from "sigpro-ui";
+import { $, watch, h, mount } from "sigpro";
+import { Button, Input, Alert, Toast, tt } from "sigpro-ui";
import "sigpro-ui/css";
-// Create your app
const App = () => {
const count = $(0);
return h('div', { class: 'p-8 max-w-md mx-auto' }, [
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
- input({
+ Input({
placeholder: 'Enter your name...'
}),
- button({
+ Button({
class: 'btn-primary mt-4',
onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`),
Alert({
- type: 'success',
+ class: 'alert-success',
message: () => `Welcome to SigProUI!`
})
]);
};
-// mount your app
mount(App, "#app");
```
-### CDN Usage (no build step)
-
-Simply add the script tag and start using SigProUI:
+### CDN Usage (no build step - all-in-one)
```html
@@ -64,8 +62,7 @@ Simply add the script tag and start using SigProUI:
SigProUI Demo
-
-
+
@@ -73,12 +70,8 @@ Simply add the script tag and start using SigProUI:
+