Installation Guide

Follow these steps to integrate SigPro-UI into your project.

!> 📘 Core Concepts
SigProUI is based on the SigPro reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the SigPro documentation.

1. Install the packages

# 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

import { $ } from "sigpro"; // Core functions
import { Input, Button, Alert } from "sigpro-ui"; // Components
import "sigpro-ui/css";

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({
      placeholder: 'Enter your name...'
    }),
    
    Button({
      class: 'btn-primary mt-4',
      onclick: () => count(count() + 1)
    }, () => `Clicks: ${count()}`),
    
    Alert({
      class: 'alert-success',
      message: () => `Welcome to SigProUI!`
    })
  ]);
};

mount(App, "#app");

CDN Usage

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SigProUI Demo</title>
  <!-- Load CSS -->
  <link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
  <style>
    body { padding: 2rem; }
  </style>
</head>
<body>
  <div id="app"></div>
  <!-- Load sigpro and sigpro-ui -->
  <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro.min.js"></script>
  <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
  <script>
    const App = () => {
      const name = $('');
      const count = $(0);
      
      return h('div', { class: 'max-w-md mx-auto p-4' }, [
        h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
        
        Input({
          value: name,
          placeholder: 'Enter your name...'
        }),
        
        Button({
          class: 'btn-primary mt-4',
          onclick: () => count(count() + 1)
        }, () => `Clicks: ${count()}`),
        
        Alert({
          class: 'alert-success',
          message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
        })
      ]);
    };
    
    mount(App, '#app');
  </script>
</body>
</html>

What's included?

SigPro Core Functions

$() - Reactive signals
watch() - Watch reactive dependencies
h() - Create HTML elements with reactivity
when() - Conditional rendering
each() - List rendering
router() - Hash‑based SPA router.
mount() - Mount components to DOM
batch() - Batch multiple reactive updates into a single flush

For more information about SigPro Core visit official Docs SigPro Docs

UI Components

Button() - Styled button with DaisyUI
Input() - Form input with floating labels
Alert() - Alert messages
Modal() - Modal dialogs
Table() - Data tables
Tabs() - Tabbed interfaces
Toast() - Toast notifications
And 40+ more components!

Utilities

t() - i18n translation function

Language Support

SigProUI includes built-in i18n with Spanish and English:

import { t, setLocale } from 'sigpro-ui';

// Change locale (default is 'es')
setLocale('en');

// Use translations
Button({}, t('close'));
Input({ placeholder: t('search') });

TypeScript Support

SigProUI includes TypeScript definitions:

import { Button, Input, Toast } from 'sigpro-ui';
import type { ButtonProps, InputProps } from 'sigpro-ui';

Troubleshooting

Problem	Solution
Components don't look styled	Make sure you're loading the CSS (`sigpro-ui.min.css`)
CDN functions not working	All core functions (`$`, `h`, `watch`, etc.) are available globally
setLocale not working	Set locale with `setLocale('en')` before using translations

Happy coding! 🎉

4.0 KiB Raw Blame History Unescape Escape