natxocc/sigpro-ui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Readme.md

Browse Source
This commit is contained in:
Natxo
2026-04-04 14:33:34 +02:00
committed by GitHub
parent bd63afa23b
commit 1478a7d63d
1 changed files with 120 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
Readme.md
View File

@@ -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
<script src="https://unpkg.com/sigpro"></script>
<script src="https://unpkg.com/sigpro-ui"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css" rel="stylesheet">
```
---
## 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
<!-- Add daisyUI CSS (required for default styles) -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css" rel="stylesheet">
```
---
## 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
<!-- Add Tailwind for utilities (optional) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Or UnoCSS -->
<script src="https://unpkg.com/unocss"></script>
```
> **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.*