Documentation
Getting Started
Authentication
Livewire
Dashboard & Widgets
Applications
UI Components
Data Visualization
E-commerce
Job Board
Cryptocurrency
Advanced

Plugins & Dependencies

Plugins & Dependencies

UltraViolet uses a carefully curated set of modern JavaScript and CSS libraries to provide a rich, interactive admin dashboard experience. This document outlines all the plugins and their purposes.

Core Framework & UI

Bootstrap 5.3.8

  • Purpose: CSS framework for responsive design and UI components
  • NPM Package: bootstrap@5.3.8
  • GitHub: twbs/bootstrap
  • Website: getbootstrap.com
  • Usage: Provides the foundation for all UI components, grid system, and responsive utilities

Bootstrap Icons 1.11.3

JavaScript Libraries

Alpine.js 3.4.2

  • Purpose: Lightweight JavaScript framework for reactive components
  • NPM Package: alpinejs@3.4.2
  • GitHub: alpinejs/alpine
  • Website: alpinejs.dev
  • Usage: Provides reactive functionality for interactive components without the complexity of larger frameworks

Cash DOM 8.1.5

  • Purpose: Lightweight jQuery alternative for DOM manipulation
  • NPM Package: cash-dom@8.1.5
  • GitHub: kenwheeler/cash
  • Website: kenwheeler.github.io/cash
  • Usage: Provides jQuery-like syntax for DOM queries and manipulation with minimal bundle size

Lodash 4.17.21

  • Purpose: Utility library for common JavaScript functions
  • NPM Package: lodash@4.17.21
  • GitHub: lodash/lodash
  • Website: lodash.com
  • Usage: Provides utility functions for data manipulation, arrays, objects, and more

UI Enhancement Libraries

SimpleBar 6.3.2

  • Purpose: Custom scrollbars with cross-browser compatibility
  • NPM Package: simplebar@6.3.2
  • CDN: simplebar@6.2.5
  • GitHub: Grsmto/simplebar
  • Website: grsmto.github.io/simplebar
  • Usage:
    • Custom scrollbars for sidebar navigation
    • Cross-browser scrollbar styling
    • Touch device support
    • Auto-hide functionality

Icon Libraries

Boxicons 2.1.4

  • Purpose: Beautiful web icons library
  • NPM Package: boxicons@2.1.4
  • GitHub: atisawd/boxicons
  • Website: boxicons.com
  • Usage: Additional icon set for various UI elements and brand icons

Material Icons Outlined

Utility Libraries

Headroom.js 0.12.0

ImagesLoaded 5.0.0

Masonry Layout 4.2.2

  • Purpose: Cascading grid layout library
  • NPM Package: masonry-layout@4.2.2
  • GitHub: desandro/masonry
  • Website: masonry.desandro.com
  • Usage: Creates Pinterest-style grid layouts for dynamic content

Fitty 2.4.2

Prism.js 1.30.0

  • Purpose: Syntax highlighting for code blocks
  • NPM Package: prismjs@1.30.0
  • CDN: Prism.js
  • GitHub: PrismJS/prism
  • Website: prismjs.com
  • Usage: Syntax highlighting in documentation and code examples

Development & Build Tools

Vite 5.0

  • Purpose: Modern build tool and development server
  • NPM Package: vite@5.0
  • GitHub: vitejs/vite
  • Website: vitejs.dev
  • Usage: Fast build tool for JavaScript and CSS bundling

Sass 1.79.4

  • Purpose: CSS preprocessor with advanced features
  • NPM Package: sass@1.79.4
  • GitHub: sass/dart-sass
  • Website: sass-lang.com
  • Usage: Advanced CSS preprocessing with variables, mixins, and functions

TypeScript 5.9.2

  • Purpose: Type-safe JavaScript development
  • NPM Package: typescript@5.9.2
  • GitHub: microsoft/TypeScript
  • Website: typescriptlang.org
  • Usage: Type-safe development for admin dashboard functionality

Data Visualization & Charts

ApexCharts 5.3.5

  • Purpose: Modern charting library for interactive data visualization
  • NPM Package: apexcharts@5.3.5
  • GitHub: apexcharts/apexcharts.js
  • Website: apexcharts.com
  • Usage:
    • Interactive charts and graphs in dashboard
    • Real-time data visualization
    • Multiple chart types (line, bar, pie, area, etc.)
    • Responsive and mobile-friendly

Advanced Table Libraries

Grid.js

  • Purpose: Advanced table library for complex data grids
  • CDN: Grid.js
  • GitHub: grid-js/gridjs
  • Website: gridjs.io
  • Usage:
    • Advanced data tables with sorting, filtering, and pagination
    • Server-side data processing
    • Custom cell renderers and formatters
    • Export functionality (CSV, JSON, Excel)
    • Plugin system for extensions

@skem9/bs5-datatables 0.1.0

  • Purpose: Bootstrap 5 compatible DataTables integration
  • NPM Package: @skem9/bs5-datatables@0.1.0
  • Usage: Enhanced table functionality with Bootstrap 5 styling

Calendar & Scheduling

FullCalendar 6.1.13

  • Purpose: Full-featured calendar and event scheduling library
  • CDN: FullCalendar
  • GitHub: fullcalendar/fullcalendar
  • Website: fullcalendar.io
  • Usage:
    • Interactive calendar views (month, week, day, list)
    • Event management and scheduling
    • Drag and drop functionality
    • Multiple calendar views and customization

Drag & Drop Libraries

Sortable.js

Map Libraries

JSVectorMap 1.7.0

  • Purpose: Interactive vector maps and geographical data visualization
  • NPM Package: jsvectormap@1.7.0
  • GitHub: themustafaomar/jsvectormap
  • Website: jsvectormap.com
  • Usage:
    • Interactive world maps, country maps, and regional maps
    • Custom markers and tooltips
    • Color-coded data visualization
    • Responsive design

Utility Libraries

Chroma.js 3.1.2

  • Purpose: Color manipulation and palette generation
  • NPM Package: chroma-js@3.1.2
  • GitHub: gka/chroma.js
  • Website: gka.github.io/chroma.js
  • Usage: Color palette generation and manipulation

Noise.js 2.1.0

  • Purpose: Perlin noise generation for visual effects
  • NPM Package: noisejs@2.1.0
  • GitHub: josephg/noisejs
  • Usage: Procedural noise generation for visual effects

BS5 Lightbox 1.8.5

  • Purpose: Bootstrap 5 compatible lightbox for images and galleries
  • NPM Package: bs5-lightbox@1.8.5
  • GitHub: trvswgnr/bs5-lightbox
  • Usage: Image galleries and modal lightboxes

@tkrotoff/bootstrap-floating-label 0.12.2

  • Purpose: Floating label inputs for Bootstrap forms
  • NPM Package: @tkrotoff/bootstrap-floating-label@0.12.2
  • Usage: Enhanced form inputs with floating labels

Custom Libraries

@huement/cosmicwave 0.5.2

  • Purpose: Custom animation and visual effects library
  • NPM Package: @huement/cosmicwave@0.5.2
  • Usage: Provides custom animations and visual effects for the UltraViolet theme

@huement/hui-prism 1.0.0

  • Purpose: Custom Prism.js integration for syntax highlighting
  • NPM Package: @huement/hui-prism@1.0.0
  • Usage: Enhanced syntax highlighting with custom themes

xterm.js 5.3.0

  • Purpose: Terminal emulator for web applications
  • CDN: xterm.js
  • GitHub: xtermjs/xterm.js
  • Website: xtermjs.org
  • Usage:
    • Web-based terminal interfaces
    • SSH client integration
    • Command-line tool interfaces
    • Development environment terminals
    • Server management dashboards

xterm.js Addons

TinyMCE 6.8.2

  • Purpose: Rich text editor for web applications
  • NPM Package: tinymce@6.8.2
  • CDN: TinyMCE
  • GitHub: tinymce/tinymce
  • Website: tinymce.com
  • Usage:
    • Rich text editing in forms
    • Content management systems
    • Email composition
    • Blog post editing
    • Documentation editors

Choices.js 10.1.0

Flatpickr 4.6.13

  • Purpose: Lightweight date and time picker
  • NPM Package: flatpickr@4.6.13
  • CDN: Flatpickr
  • GitHub: flatpickr/flatpickr
  • Website: flatpickr.js.org
  • Usage:
    • Date picker inputs
    • Time picker inputs
    • Date range selection
    • Custom date formats
    • Form validation

Cleave.js 1.6.0

  • Purpose: Input formatting and masking
  • NPM Package: cleave.js@1.6.0
  • CDN: Cleave.js
  • GitHub: nosir/cleave.js
  • Website: nosir.github.io/cleave.js
  • Usage:
    • Credit card number formatting
    • Phone number formatting
    • Currency input formatting
    • Date input formatting
    • Custom input masks

@bprogress/core 1.3.4

  • Purpose: Beautiful progress bars and loading indicators
  • NPM Package: @bprogress/core@1.3.4
  • GitHub: bprogress/core
  • Usage:
    • Animated progress bars
    • Loading indicators
    • Step progress indicators
    • Circular progress bars
    • Custom progress animations

@adobe/leonardo-contrast-colors 1.0.0

  • Purpose: Color contrast calculation and accessibility tools
  • NPM Package: @adobe/leonardo-contrast-colors@1.0.0
  • GitHub: adobe/leonardo
  • Usage:
    • WCAG contrast ratio calculations
    • Accessible color palette generation
    • Color accessibility validation
    • Theme compliance checking

Plugin Configuration

SimpleBar Setup

<!-- Add data attribute to enable SimpleBar -->
<aside class="sidebar-wrapper" data-simplebar="true">
  <!-- Your sidebar content -->
</aside>
// SimpleBar is automatically initialized in admin.ts
// For manual initialization:
import SimpleBar from 'simplebar'
new SimpleBar(document.querySelector('[data-simplebar]'))

Grid.js Configuration

<!-- Include Grid.js -->
<script src="https://cdn.jsdelivr.net/npm/gridjs@6.0.6/dist/gridjs.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridjs@6.0.6/dist/mermaid.min.css" rel="stylesheet" />

<!-- Create container -->
<div id="wrapper"></div>
// Initialize Grid.js
const grid = new gridjs.Grid({
  columns: ["Name", "Email", "Phone Number", "Position"],
  data: [
    ["John", "john@example.com", "(353) 01 222 3333", "Software Engineer"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444", "Data Scientist"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033", "Web Developer"]
  ],
  search: true,
  pagination: true,
  sort: true,
  resizable: true,
  fixedHeader: true,
  height: '400px'
}).render(document.getElementById("wrapper"));

FullCalendar Setup

<!-- Include FullCalendar -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.13/index.global.min.js'></script>

<!-- Create calendar container -->
<div id='calendar'></div>
// Initialize FullCalendar
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        editable: true,
        selectable: true,
        events: [
            // Your events array
        ]
    });
    calendar.render();
});

Sortable.js Configuration

<!-- Include Sortable.js -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

<!-- Create sortable list -->
<div id="sortable-list">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
// Initialize Sortable
var sortable = Sortable.create(document.getElementById('sortable-list'), {
    animation: 150,
    ghostClass: 'sortable-ghost',
    onEnd: function (evt) {
        console.log('Item moved from', evt.oldIndex, 'to', evt.newIndex);
    }
});

JSVectorMap Setup

<!-- Include JSVectorMap -->
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/js/jsvectormap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/css/jsvectormap.min.css" rel="stylesheet" />

<!-- Create map container -->
<div id="world-map" style="height: 500px;"></div>
// Initialize JSVectorMap
new jsVectorMap({
    selector: '#world-map',
    map: 'world',
    backgroundColor: 'transparent',
    regionStyle: {
        initial: {
            fill: '#e4e4e4',
            fillOpacity: 0.9,
            stroke: 'none',
            strokeWidth: 0,
            strokeOpacity: 0
        },
        hover: {
            fillOpacity: 0.8,
            cursor: 'pointer'
        }
    },
    series: {
        regions: [{
            values: {
                // Your data values
            },
            scale: ['#C8EEFF', '#0071A4'],
            normalizeFunction: 'polynomial'
        }]
    }
});

ApexCharts Configuration

<!-- Include ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@5.3.5/dist/apexcharts.min.js"></script>

<!-- Create chart container -->
<div id="chart"></div>
// Initialize ApexCharts
var options = {
    series: [{
        name: 'Sales',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }],
    chart: {
        type: 'line',
        height: 350
    },
    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
    }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

xterm.js Terminal Configuration

<!-- Include xterm.js and addons -->
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.7.0/lib/xterm-addon-fit.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.9.0/lib/xterm-addon-web-links.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">

<!-- Create terminal container -->
<div id="terminal"></div>
// Initialize xterm.js terminal
function initTerminal() {
    const { Terminal } = window;
    const { FitAddon } = window;
    const { WebLinksAddon } = window;

    // Create terminal instance
    const terminal = new Terminal({
        cursorBlink: true,
        fontFamily: 'Ubuntu Sans Mono, monospace',
        fontSize: 14,
        theme: {
            background: '#1e1e1e',
            foreground: '#ffffff',
            cursor: '#ffffff',
            selection: '#ffffff40'
        }
    });

    // Add addons
    const fitAddon = new FitAddon();
    const webLinksAddon = new WebLinksAddon();

    terminal.loadAddon(fitAddon);
    terminal.loadAddon(webLinksAddon);

    // Open terminal
    terminal.open(document.getElementById('terminal'));
    fitAddon.fit();

    // Add some demo content
    terminal.writeln('Welcome to UltraViolet Terminal!');
    terminal.writeln('Type "help" for available commands.');
    terminal.write('$ ');

    // Handle input
    terminal.onData(data => {
        terminal.write(data);
    });
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initTerminal);

TinyMCE Rich Text Editor Configuration

<!-- Include TinyMCE -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.2/tinymce.min.js"></script>

<!-- Create editor container -->
<textarea id="editor"></textarea>
// Initialize TinyMCE
tinymce.init({
    selector: '#editor',
    height: 400,
    menubar: false,
    plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'help', 'wordcount'
    ],
    toolbar: 'undo redo | blocks | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
    content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; }'
});

Choices.js Enhanced Select Configuration

<!-- Include Choices.js -->
<script src="https://cdn.jsdelivr.net/npm/choices.js@10.1.0/public/assets/scripts/choices.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/choices.js@10.1.0/public/assets/styles/choices.min.css" rel="stylesheet" />

<!-- Create select elements -->
<select id="single-select">
    <option value="">Choose an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<select id="multi-select" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
// Initialize Choices.js
const singleSelect = new Choices('#single-select', {
    searchEnabled: true,
    placeholder: true,
    placeholderValue: 'Choose an option'
});

const multiSelect = new Choices('#multi-select', {
    removeItemButton: true,
    placeholder: true,
    placeholderValue: 'Select multiple options'
});

Flatpickr Date Picker Configuration

<!-- Include Flatpickr -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css" rel="stylesheet" />

<!-- Create date input -->
<input type="text" id="date-picker" placeholder="Select a date">
// Initialize Flatpickr
flatpickr("#date-picker", {
    dateFormat: "Y-m-d",
    allowInput: true,
    clickOpens: true,
    minDate: "today",
    maxDate: new Date().fp_incr(30) // 30 days from now
});

Cleave.js Input Formatting Configuration

<!-- Include Cleave.js -->
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.js"></script>

<!-- Create formatted inputs -->
<input type="text" id="credit-card" placeholder="Credit card number">
<input type="text" id="phone" placeholder="Phone number">
<input type="text" id="currency" placeholder="Amount">
// Initialize Cleave.js
new Cleave('#credit-card', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        console.log('Credit card type: ' + type);
    }
});

new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'US'
});

new Cleave('#currency', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

Masonry Layout Configuration

⚠️ CRITICAL: When using Masonry with images, you MUST use the imagesLoaded plugin to wait for all images to load before initializing Masonry. Otherwise, the grid will have incorrect heights and overlapping issues.

<!-- Include Masonry (already included via CDN) -->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

<!-- Create masonry grid -->
<div class="grid" id="my-masonry-grid">
    <!-- Grid sizer for column width calculations -->
    <div class="grid-sizer"></div>

    <!-- Grid items -->
    <div class="grid-item">
        <img src="image1.jpg" class="img-fluid" alt="Image 1">
    </div>

    <div class="grid-item">
        <img src="image2.jpg" class="img-fluid" alt="Image 2">
    </div>

    <div class="grid-item">
        <img src="image3.jpg" class="img-fluid" alt="Image 3">
    </div>
</div>

CSS (Required):

/* Grid container */
.grid {
    max-width: 1200px;
    margin: 0 auto;
}

/* Column width and grid items */
.grid-sizer,
.grid-item {
    width: calc(33.333% - 10px);
}

/* Grid items */
.grid-item {
    float: left;
    margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .grid-sizer,
    .grid-item {
        width: calc(50% - 10px);
    }
}

JavaScript - Option 1 (Recommended - Using UltraViolet Helper):

// This automatically includes imagesLoaded support
window.initMasonry('#my-masonry-grid', {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true,
    gutter: 15
});

JavaScript - Option 2 (Manual with imagesLoaded):

// Initialize Masonry
const msnry = new Masonry('#my-masonry-grid', {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true,
    gutter: 15
});

// CRITICAL: Wait for images to load before laying out
imagesLoaded('#my-masonry-grid', function() {
    msnry.layout();
});

For more details, see the Masonry Documentation and Live Examples.

A huement.com Original Project