diff --git a/Readme.md b/Readme.md index f8cc642..8c48d95 100644 --- a/Readme.md +++ b/Readme.md @@ -1,6 +1,6 @@ # 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 with **native daisyUI styling** out of the box. +**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. 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. @@ -9,11 +9,11 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all ## Features - **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 +- **Self-Contained Styling**: Full CSS included - no external frameworks needed +- **Built on Tailwind CSS v4 + 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 -- **Lightweight**: Minimal footprint, fully reactive +- **Lightweight**: Minimal footprint with everything bundled --- @@ -22,56 +22,18 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all ### Via NPM / Bun ```bash -# Install SigPro core first -bun add sigpro -# or -npm install sigpro - -# Install SigPro UI -bun add sigpro-ui -# or npm install sigpro-ui ``` ### Via CDN (Browser) ```html + - ``` ---- - -## Styling Setup - -SigPro UI components are **pre-styled with daisyUI v5** and work immediately after adding the daisyUI CSS: - -```html - - -``` - -### 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. +**That's it!** No additional CSS files, no configuration, no build step. --- @@ -112,7 +74,7 @@ import SigproUI from "sigpro-ui"; // Injects Button, Table, Input, Alert, etc. into window SigproUI.install(); -// Now use them directly anywhere: +// Now you can use them directly anywhere: const myApp = () => Table({ items: [], columns: [] }); ``` @@ -184,30 +146,41 @@ const dateRange = $(null); Datepicker({ range: true, value: dateRange, - hour: true + hour: true // Include time selection }); ``` -### File upload +### File upload with drag & drop ```javascript import { Fileinput } from "sigpro-ui"; Fileinput({ - max: 5, + max: 5, // Max size in MB 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") -]) +## Styling Customization + +SigPro UI comes with **Tailwind CSS v4 + daisyUI v5** pre-bundled. You can customize the theme by overriding CSS variables: + +```css +/* Override default theme colors */ +:root { + --color-primary: oklch(45% .24 277.023); + --color-secondary: oklch(65% .241 354.308); + --color-accent: oklch(77% .152 181.912); +} + +/* Or use data attributes for dark/light mode */ +[data-theme="dark"] { + --color-base-100: oklch(25.33% .016 252.42); + --color-primary: oklch(58% .233 277.117); +} ``` ---