Installation Guide

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

!> 📘 Core Concepts
SigProUI is built on top of 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-ui

# Or with bun
bun add sigpro-ui

2. Import and use in your app

ESM / Module usage

import "sigpro-ui";
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 (no build step - all-in-one)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SigProUI Demo</title>
  <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>

  <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, Locale } from 'sigpro-ui';

// Change locale (default is 'es')
Locale('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
Locale not working	Set locale with `Locale('en')` before using translations

Happy coding! 🎉

3.8 KiB Raw Blame History Unescape Escape