Installation Guide

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

Prerequisites

Make sure your project already has:

SigPro Core installed.
Tailwind CSS v4 configured.
daisyUI v5 installed.

1️.Install the package

Choose your preferred package manager:

npm install sigpro-ui
# or
pnpm add sigpro-ui
# or
bun add sigpro-ui
# or
yarn add sigpro-ui

2️.Configure CSS

Add the following to your main CSS file (e.g., app.css):

@import "tailwindcss";
@plugin "daisyui";

This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.

3️.Import and initialize in your app

Create or update your main.js (or index.js):

// Import required modules
import { $, $mount } from "sigpro";
import { UI } from "sigpro-ui";

// Import your CSS (adjust the path if needed)
import "./app.css";

// Import your main App component
import { App } from "./App.js";

// Initialize SigPro-UI (English locale)
UI("en");

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

4️.Create your first component

Example App.js:

import { Div, Button, Alert } from "sigpro-ui";

export const App = () => {
  return Div({ class: "p-4" }, [
    Button({
      class: "btn-primary",
      onclick: () => Alert("Hello SigPro-UI!")
    }, "Click Me")
  ]);
};

Optional: Use CDN (no build step)

If you prefer not to use a build step, you can import directly from a CDN:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="importmap">
    {
      "imports": {
        "sigpro": "https://esm.run/sigpro",
        "sigpro-ui": "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm"
      }
    }
  </script>
  <style>
    @import "tailwindcss";
    @plugin "daisyui";
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { $, $mount } from "sigpro";
    import { UI, Div, Button, Alert } from "sigpro-ui";

    UI("en");

    const App = () => Div({ class: "p-4" }, [
      Button({ class: "btn-primary", onclick: () => Alert("Hello!") }, "Click")
    ]);

    $mount(App, "#app");
  </script>
</body>
</html>

Troubleshooting

Problem	Solution
Components don't look styled	Check that `app.css` is imported and contains the Tailwind + daisyUI directives.
`UI is not defined`	Make sure you call `UI()` before using any component like `Button`, `Input`, etc.
Locale not working	Verify you passed a valid locale (`"es"` or `"en"`) to `UI()`.
Build errors with Tailwind v4	Ensure Tailwind CSS v4 and daisyUI v5 are correctly installed and configured.

Happy coding! 🎉

2.8 KiB Raw Permalink Blame History Unescape Escape