Components

Bootstrap 5 Native Components

Most ArchitectUI UI — modals, dropdowns, popovers, tooltips, tabs, toasts, accordions — comes straight from Bootstrap 5.3.8. No JavaScript wiring is needed beyond Bootstrap's own initializers, which run from src/app.js:

// src/app.js (excerpt)
                const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
                popoverTriggerList.forEach(el => new bootstrap.Popover(el));
                
                const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));

Triggers use Bootstrap 5's data-bs-toggle attributes (note the bs- prefix, different from Bootstrap 4's plain data-toggle):

Custom Dropdown Behavior

Dropdowns deserve special mention: ArchitectUI replaces Bootstrap's native dropdown plugin with a custom portal-based implementation in src/app.js. The custom handler moves dropdown menus to document.body with position: fixed so they escape parents with overflow: hidden or transform stacking contexts. Header dropdowns (anything inside .app-header) are left in place because they need to inherit header styling.

See jQuery Migration for the rationale and full implementation reference.

Notifications

Bootstrap Toasts

Native Bootstrap 5 toasts via src/utils/toast.js (which replaced the legacy toastr jQuery plugin). Bundle entry: toastr.

import { showToast } from "./utils/toast";
                
                showToast({
                    title: "Saved",
                    message: "Your changes were saved successfully.",
                    variant: "success",      // success | info | warning | danger
                    delay: 4000,
                });

SweetAlert2

sweetalert2 11.26 provides modal dialogs. Bundle entry: sweet_alerts. Initialized in src/scripts-init/sweet-alerts.js.

Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to undo this.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3f6ad8",
                });

Showcase: components-notifications.html

Calendar

FullCalendar 6.1 with day-grid, time-grid, list, and interaction plugins. Bundle entry: fullcalendar. Initialized in src/scripts-init/calendar.js.

import { Calendar } from "@fullcalendar/core";
                import dayGridPlugin from "@fullcalendar/daygrid";
                import interactionPlugin from "@fullcalendar/interaction";
                
                const calendar = new Calendar(document.getElementById("calendar"), {
                    plugins: [dayGridPlugin, interactionPlugin],
                    initialView: "dayGridMonth",
                    events: [/* ... */],
                });
                calendar.render();

Showcase: components-calendar.html

Carousel / Slider

Slick Carousel 1.8 (jQuery-dependent — one of the remaining jQuery holdouts). Bundle entry: carousel_slider. Initialized in src/scripts-init/carousel-slider.js.

$(".my-slider").slick({
                    dots: true,
                    arrows: true,
                    autoplay: true,
                });

Showcase: components-carousel.html

Tree View

jQuery Fancytree 2.38. Bundle entry: treeview. Initialized in src/scripts-init/treeview.js.

$("#myTree").fancytree({
                    source: [/* tree data */],
                    checkbox: true,
                    selectMode: 3,
                });

Showcase: components-tree-view.html

Ratings

jQuery Bar Rating 1.2. Bundle entry: rating. Initialized in src/scripts-init/rating.js.

$(".my-rating").barrating({
                    theme: "fontawesome-stars",
                    initialRating: 4,
                });

Showcase: components-ratings.html

Maps

Two mapping libraries are wired up:

• Mapbox GL 3.23 for vector tile maps with full styling control. Requires a Mapbox access token.
• gmaps.js 0.4 for legacy Google Maps wrapper examples.

Bundle entry: maps. Initialized in src/scripts-init/maps.js.

import mapboxgl from "mapbox-gl";
                
                mapboxgl.accessToken = "YOUR_TOKEN_HERE";
                new mapboxgl.Map({
                    container: "map",
                    style: "mapbox://styles/mapbox/streets-v12",
                    center: [-74.5, 40],
                    zoom: 9,
                });

Showcase: components-maps.html

Image Crop

Cropper.js 2.1 (vanilla, replaced jquery-cropper). Bundle entry: image_crop. Initialized in src/scripts-init/image-crop-vanilla.js.

import Cropper from "cropperjs";
                
                const cropper = new Cropper(document.getElementById("image"), {
                    aspectRatio: 16 / 9,
                    viewMode: 1,
                });

Showcase: components-image-crop.html

Guided Tours

Intro.js 8.3 with modular architecture. Bundle entry: guided_tours. Initialized in src/scripts-init/guided-tours.js.

import introJs from "intro.js";
                
                introJs.tour().setOptions({
                    steps: [
                        { element: "#step-1", intro: "Welcome!" },
                        { element: "#step-2", intro: "This is the sidebar." },
                    ],
                }).start();

Showcase: components-guided-tours.html

Count Up

Animated number counters via countup.js 2.10 + IntersectionObserver. Bundle entry: count_up. Initialized in src/scripts-init/count-up.js.

import { CountUp } from "countup.js";
                
                const counter = new CountUp("my-target", 12345);
                if (!counter.error) counter.start();

Counters trigger when their element enters the viewport. Showcase: components-count-up.html

Loading Blocks / Buttons

Block UI (Native)

Vanilla JavaScript blocking overlay, replacing the legacy block-ui jQuery plugin. Bundle entry: blockui. Source: src/utils/block-ui-native.js.

import { blockUI, unblockUI } from "./utils/block-ui-native";
                
                blockUI(document.getElementById("my-card"));
                // ...async work...
                unblockUI(document.getElementById("my-card"));

Ladda Buttons

Spinner-attached buttons via Ladda 2.0. Bundle entry: ladda. Initialized in src/scripts-init/ladda-loading.js.

<button class="ladda-button" data-style="expand-right">
                    <span class="ladda-label">Save</span>
                </button>

Showcase: components-loading-blocks.html

Form Widgets

See Folder Structure for the full list. Each form widget is its own Webpack entry under scripts-init/form-components/:

Form Wizard

SmartWizard 7 for multi-step forms with per-step validation. Bundle entry: form_wizard.

$("#smartwizard").smartWizard({
                    selected: 0,
                    theme: "arrows",
                    transition: { animation: "fade" },
                });

Showcase: forms-wizard.html

Data Tables

DataTables 2.3.8 with Bootstrap 5 responsive extension. Bundle entry: tables. Initialized via the jQuery-free constructor in src/scripts-init/tables-native.js:

import DataTable from "datatables.net-bs5";
                import "datatables.net-responsive-bs5";
                
                new DataTable("#myTable", {
                    responsive: true,
                    pageLength: 25,
                });

Showcase: tables-data-tables.html

Charts

Three chart libraries, three bundle entries, three showcase pages. See the dedicated Charts page for which to pick when.