UI The SigPro UI plugin is a high-level component library built on top of the reactive core. It leverages Tailwind CSS v4 for utility styling and daisyUI v5 for semantic components.
To use these components, you must install the styling engine. SigPro UI provides the logic, but Tailwind and daisyUI provide the visuals.
npm install -D tailwindcss @tailwindcss/vite daisyui@nextpnpm add -D tailwindcss @tailwindcss/vite daisyui@nextyarn add -D tailwindcss @tailwindcss/vite daisyui@nextbun add -d tailwindcss @tailwindcss/vite daisyui@nextWould you like to continue with the Router.md documentation now?
app.css) In Tailwind v4, configuration is handled directly in your CSS. Create a src/app.css file:
/* src/app.css */
@import "tailwindcss";
/* Import daisyUI v5 as a Tailwind v4 plugin */
@plugin "daisyui";
/* Optional: Configure themes */
@custom-variant dark (&:where(.dark, [data-theme="dark"], [data-theme="dark"] *)));You must import your CSS and register the UI plugin in your entry point. This populates the global scope with reactive component helpers (prefixed with _).
// main.js
import './app.css';
import { $ } from 'sigpro';
import { UI } from 'sigpro/plugins';
$.plugin(UI).then(() => {
// Global components like _button and _input are now ready
import('./App.js').then(app => $.mount(app.default));
});_tags) SigPro UI components are more than just HTML; they are Reactive Functional Components that manage complex states (loading, errors, accessibility) automatically.
_button) The _button automatically handles spinners and disabled states based on signals.
| Property | Type | Description |
|---|---|---|
$loading | signal | If true, shows a spinner and disables the button. |
$disabled | signal | Manually disables the button (logic-bound). |
icon | node/str | Prepends an icon to the text. |
badge | string | Appends a small badge to the button. |
_button({
$loading: $isSaving,
icon: '💾',
class: 'btn-primary'
}, "Save Data")_input, _select, _checkbox) These components wrap the raw input in a fieldset with integrated labels and tooltips.
label: Field title displayed above the input.tip: Displays a ? badge that shows a tooltip on hover.$error: A signal that, when populated, turns the input red and displays the message.$value: Two-way binding. Updates the signal on input and the input on signal change._input({
label: "Username",
tip: "Choose a unique name",
$value: $name,
$error: $nameError
})_modal) The _modal is surgically mounted. If the $open signal is false, the component is completely removed from the DOM, optimizing performance.
const $showModal = $(false);
_modal({ $open: $showModal, title: "Alert" }, [
p("Are you sure you want to proceed?"),
_button({ onclick: () => doAction() }, "Confirm")
])_tabs, _drawer, _navbar) Designed to work seamlessly with the Router.
| Component | Key Logic |
|---|---|
_tabs | Accepts an active property (signal or function) to highlight the current tab. |
_drawer | A responsive sidebar that toggles via an ID or an $open signal. |
_navbar | Standard top bar with shadow and glass effect support. |
_menu | Vertical navigation list with active state support. |
Once $.plugin(UI) is active, these tags are available project-wide:
| Tag | Category | Use Case |
|---|---|---|
_fieldset | Layout | Grouping related inputs with a legend. |
_accordion | Content | Collapsible sections (FAQs). |
_badge | Feedback | Status indicators (Success, Warning). |
_tooltip | Feedback | Descriptive text on hover. |
_range | Input | Reactive slider for numerical values. |
With the UI ready and styled via Tailwind v4, we can move to the Router.md. We will explain how to link _tabs and _menu to different URL paths for a full SPA experience.
Would you like to start with the Router configuration?
`,40)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};