diff --git a/Readme.md b/Readme.md
index 8e995da..f8cc642 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1,6 +1,6 @@
-# SigPro UI (W.I.P.)
+# SigPro UI
-**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**.
+**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 **native daisyUI styling** out of the box.
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.
@@ -8,37 +8,26 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
## 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.
+- **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates
+- **Native daisyUI Styling**: Beautiful, semantic components out of the box
+- **CSS Framework Friendly**: Use Tailwind, UnoCSS, or any other library for grids and utilities
+- **Tree Shaking Ready**: Import only what you need
+- **Zero-Import Option**: Inject all components into the global scope with one command
+- **Lightweight**: Minimal footprint, fully reactive
---
-## Prerequisites
+## Installation
-To use SigPro UI, your project must include:
+### Via NPM / Bun
-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
+```bash
+# Install SigPro core first
bun add sigpro
# or
npm install sigpro
-```
-### Step 2: Install SigPro UI
-
-```Bash
+# Install SigPro UI
bun add sigpro-ui
# or
npm install sigpro-ui
@@ -49,55 +38,81 @@ npm install sigpro-ui
```html
+
```
+
---
-## 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.
+## Styling Setup
-Create or edit your global CSS file (e.g., style.css):
+SigPro UI components are **pre-styled with daisyUI v5** and work immediately after adding the daisyUI CSS:
-```css
-/* src/style.css */
-@import "tailwindcss";
-@plugin "daisyui";
-
-/* Optional: Your custom theme overrides */
-:root {
- --primary: #570df8;
- --secondary: #f000b8;
-}
+```html
+
+
```
----
-## Setup & Usage
-You can use SigPro UI in two ways: **Modular** (Recommended for production) or **Global** (Fastest for prototyping).
+### Want additional utilities?
+
+You're free to add **Tailwind CSS**, **UnoCSS**, or any other CSS framework for:
+
+- Grid systems (`grid`, `flex`, etc.)
+- Spacing utilities (`p-4`, `m-2`, `gap-4`)
+- Typography helpers (`text-center`, `font-bold`)
+- Custom responsive behaviors
+
+These will work **alongside** daisyUI without conflicts. Example:
+
+```html
+
+
+
+
+
+```
+
+> **Note**: Your components will inherit daisyUI styles by default. Tailwind/ UnoCSS only add extra utilities without overriding component styles.
+
+---
+
+## 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. This keeps your bundle small.
+
+Import only the components you need:
```javascript
import { $, $mount } from "sigpro";
-import { Button, Modal, Table } from "sigpro-ui";
+import { Button, Modal, Input, Alert } from "sigpro-ui";
const App = () => {
const show = $(false);
- return Button({ onclick: () => show(true) }, "Open Modal");
+
+ return Button(
+ {
+ class: "btn-primary",
+ 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.
+
+Inject all components into the `window` object:
```javascript
import SigproUI from "sigpro-ui";
-// Injects Button, Table, Input, Icons, Utils, etc. into window
+// Injects Button, Table, Input, Alert, etc. into window
SigproUI.install();
-// Now you can use them directly anywhere:
+// Now use them directly anywhere:
const myApp = () => Table({ items: [], columns: [] });
```
@@ -124,6 +139,8 @@ const App = () => {
}, () => `Clicks: ${count()}`)
]);
};
+
+$mount(App, "#app");
```
---
@@ -132,7 +149,7 @@ const App = () => {
| Category | Components |
| :--- | :--- |
-| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating` |
+| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`, `Fileinput` |
| **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` |
| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` |
@@ -140,7 +157,62 @@ const App = () => {
---
+## Component Examples
+
+### Form with validation
+
+```javascript
+import { Input, Button } from "sigpro-ui";
+
+const email = $("");
+
+Input({
+ type: "email",
+ value: email,
+ placeholder: "your@email.com",
+ validate: (v) => !v.includes("@") ? "Invalid email" : null
+});
+```
+
+### Datepicker with range
+
+```javascript
+import { Datepicker } from "sigpro-ui";
+
+const dateRange = $(null);
+
+Datepicker({
+ range: true,
+ value: dateRange,
+ hour: true
+});
+```
+
+### File upload
+
+```javascript
+import { Fileinput } from "sigpro-ui";
+
+Fileinput({
+ max: 5,
+ accept: "image/*",
+ onSelect: (files) => console.log(files)
+});
+```
+
+### Using with Tailwind utilities
+
+```javascript
+// daisyUI provides component styles, Tailwind adds spacing utilities
+Div({ class: "grid grid-cols-2 gap-4 p-6" }, [
+ Button({ class: "btn-primary col-span-1" }, "Save"),
+ Button({ class: "btn-ghost col-span-1" }, "Cancel")
+])
+```
+
+---
+
## License
-MIT © 2026 **SigPro Team**.
+MIT © 2026 **SigPro Team**
*Engineered for speed, designed for clarity, built for the modern web.*