Installation Guide

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

!> 📘 Core Concepts
Note: SigPro-UI now includes SigPro core internally. No need to install SigPro separately. 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. It covers everything you need to build reactive applications with signals, computed values, and effects.

1. Install the package

Choose your preferred package manager:

npm install sigpro-ui

2. Import and use in your app

ESM / Module usage

// Import everything from sigpro-ui (includes sigpro core)
import { $, $mount, Button, Alert, Input, tt } from "sigpro-ui";
import "sigpro-ui/css";

// Create your app
const App = () => {
  const count = $(0);
  
  return $html('div', { class: 'p-8 max-w-md mx-auto' }, [
    $html('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({
      type: 'success',
      message: () => `Welcome to SigProUI!`
    })
  ]);
};

// Mount your app
$mount(App, "#app");

CDN Usage (no build step)

Simply add the script tag and start using SigProUI:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SigProUI Demo</title>
  <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
  <link href="https://unpkg.com/sigpro-ui@latest/css/sigpro-ui.min.css" rel="stylesheet">
  <style>
    body { padding: 2rem; }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    // All functions are available directly in window
    // No need to import anything!
    
    const { $, $mount, Button, Input, Alert } = window;
    
    const App = () => {
      const name = $('');
      const count = $(0);
      
      return $html('div', { class: 'max-w-md mx-auto p-4' }, [
        $html('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({
          type: 'success',
          message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
        })
      ]);
    };
    
    $mount(App, '#app');
  </script>
</body>
</html>

What's included?

When you install SigProUI, you get:

SigPro Core Functions

$() - Reactive signals
$watch() - Watch reactive dependencies
$html() - Create HTML elements with reactivity
$if() - Conditional rendering
$for() - List rendering
$router() - Hash-based routing
$mount() - Mount components to DOM

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
And 30+ more components!

Utilities

tt() - i18n translation function

Language Support

SigProUI includes built-in i18n with Spanish and English:

import { tt, Locale } from 'sigpro-ui';

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

// Use translations
const closeButton = Button({}, tt('close')());
const searchPlaceholder = Input({ placeholder: tt('search')() });

TypeScript Support

SigProUI includes TypeScript definitions. Import types as needed:

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

const MyButton: React.FC<ButtonProps> = (props) => {
  return Button(props, 'Click me');
};

Troubleshooting

Problem	Solution
Components don't look styled	Make sure you're loading css 'sigpro.css' (either via import or CDN)
`$ is not defined`	SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui'
`Button is not defined`	In CDN mode, all components are in window. Use `window.Button` or destructure from window
Build errors	Ensure you're using a modern bundler that supports ESM
CDN components not working	The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly
Locale not working	Set locale with `Locale('en')` before using translations

Happy coding! 🎉

4.8 KiB Raw Blame History