UI Elements

UltraViolet Pro includes a comprehensive set of UI elements built on Bootstrap 5.3.8, enhanced with custom styling and components for creating modern, professional interfaces.

Design System

Typography

UltraViolet uses a carefully curated typography system for optimal readability and visual hierarchy.

Route: /admin/design/typography

Font Families

// Primary Font Stack
$font-family-sans-serif: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

// Display Font
$font-family-display: 'Orbitron', sans-serif;

// Monospace Font
$font-family-monospace: 'Fira Code', 'Monaco', 'Consolas', monospace;

Headings

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Text Utilities

<!-- Font Weights -->
<p class="fw-light">Light text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-medium">Medium text</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-bold">Bold text</p>

<!-- Font Sizes -->
<p class="fs-1">Font size 1</p>
<p class="fs-2">Font size 2</p>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
<p class="fs-5">Font size 5</p>
<p class="fs-6">Font size 6</p>

<!-- Text Alignment -->
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>

Special Typography

<!-- Orbitron Display Font -->
<h1 class="orbitron">Futuristic Heading</h1>

<!-- Lead Text -->
<p class="lead">This is a lead paragraph with emphasis.</p>

<!-- Muted Text -->
<p class="text-muted">This is muted text</p>

<!-- Small Text -->
<small>This is small text</small>

Color Palette

UltraViolet features a modern color palette optimized for the synthwave aesthetic.

Route: /admin/design/color-palette

Primary Colors

<div class="bg-primary text-white p-3">Primary Color</div>
<div class="bg-secondary text-white p-3">Secondary Color</div>
<div class="bg-success text-white p-3">Success Color</div>
<div class="bg-danger text-white p-3">Danger Color</div>
<div class="bg-warning text-dark p-3">Warning Color</div>
<div class="bg-info text-white p-3">Info Color</div>

Theme Colors

// UltraViolet Theme Colors
$primary: #6366f1;      // Indigo
$secondary: #8b5cf6;    // Purple
$success: #10b981;      // Emerald
$danger: #ef4444;       // Red
$warning: #f59e0b;      // Amber
$info: #06b6d4;         // Cyan

// Dark Theme
$dark: #0f172a;         // Slate 900
$light: #f1f5f9;        // Slate 100

Gradient Utilities

<div class="bg-gradient-primary p-3">Primary Gradient</div>
<div class="bg-gradient-secondary p-3">Secondary Gradient</div>
<div class="bg-gradient-success p-3">Success Gradient</div>

Background Animations

Dynamic background animations for enhanced visual appeal.

Route: /admin/design/background-animations

Cosmic Wave

<cosmic-wave 
    class="fill-primary" 
    data-wave-points="12" 
    data-wave-variance="2"
    data-wave-face="bottom">
</cosmic-wave>

Particle Effects

<div class="particles-background" data-particles="50"></div>

Interface Elements

Alerts

Contextual feedback messages for user actions.

Route: /admin/ui?page=alerts

<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Success!</strong> Your changes have been saved.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<div class="alert alert-warning d-flex align-items-center" role="alert">
    <i class="material-symbols-rounded me-2">warning</i>
    <div>This is a warning alert with an icon!</div>
</div>

Buttons

Button components with various styles and states.

Route: /admin/ui?page=buttons

<!-- Button Variants -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>

<!-- Outline Buttons -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>

<!-- Button Sizes -->
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>

<!-- Button Groups -->
<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

<!-- Cyber Buttons (Custom) -->
<button type="button" class="btn btn-cyber">
    <i class="material-symbols-rounded me-2">rocket_launch</i>
    Cyber Button
</button>

Modals

Dialog boxes for user interactions.

Route: /admin/ui?page=modals

<!-- Modal Trigger -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Modal body content goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- HUD Modal (Custom) -->
<x-hud.modal id="hudModal" title="HUD Modal">
    <p>This is a custom HUD-style modal with futuristic styling.</p>
</x-hud.modal>

Grid & Flexbox

Layout utilities for responsive design.

Route: /admin/ui?page=grid

<!-- Grid System -->
<div class="container">
    <div class="row">
        <div class="col-md-6">Column 1</div>
        <div class="col-md-6">Column 2</div>
    </div>
</div>

<!-- Flexbox Utilities -->
<div class="d-flex justify-content-between align-items-center">
    <div>Left</div>
    <div>Right</div>
</div>

<div class="d-flex flex-column gap-3">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Badges & Avatars

Visual indicators and user representations.

Route: /admin/ui?page=badges

<!-- Badges -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge rounded-pill bg-primary">Pill Badge</span>

<!-- Avatars -->
<img src="./images/avatar.jpg" class="rounded-circle" width="48" height="48" alt="Avatar">

<!-- Avatar Group -->
<div class="avatar-group">
    <img src="./images/avatar1.jpg" class="rounded-circle" width="40" height="40" alt="User 1">
    <img src="./images/avatar2.jpg" class="rounded-circle" width="40" height="40" alt="User 2">
    <img src="./images/avatar3.jpg" class="rounded-circle" width="40" height="40" alt="User 3">
    <span class="avatar-count">+5</span>
</div>

Popovers & Tooltips

Contextual overlays for additional information.

Route: /admin/ui?page=popovers

<!-- Tooltips -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top" 
        title="This is a tooltip">
    Hover me
</button>

<!-- Popovers -->
<button type="button" class="btn btn-secondary" 
        data-bs-toggle="popover" 
        data-bs-title="Popover Title"
        data-bs-content="This is the popover content.">
    Click me
</button>

<script>
// Initialize tooltips and popovers
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});

const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
});
</script>

Pagination

Navigation for paginated content.

Route: /admin/ui?page=pagination

<!-- Basic Pagination -->
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

<!-- Pagination Sizes -->
<ul class="pagination pagination-sm">
    <!-- Small pagination -->
</ul>

<ul class="pagination pagination-lg">
    <!-- Large pagination -->
</ul>

Toggles

Switch components for on/off states.

Route: /admin/ui/toggles

<!-- Basic Toggle -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">
        Default switch
    </label>
</div>

<!-- Checked Toggle -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">
        Checked switch
    </label>
</div>

<!-- Disabled Toggle -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckDisabled">
        Disabled switch
    </label>
</div>

<!-- Custom Styled Toggle -->
<div class="form-check form-switch form-switch-lg">
    <input class="form-check-input" type="checkbox" id="largeSwitch">
    <label class="form-check-label" for="largeSwitch">
        Large switch
    </label>
</div>

Spacing Utilities

<!-- Margin -->
<div class="m-0">No margin</div>
<div class="m-3">Medium margin</div>
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="mx-auto">Horizontal center</div>

<!-- Padding -->
<div class="p-0">No padding</div>
<div class="p-3">Medium padding</div>
<div class="pt-3">Padding top</div>
<div class="pb-3">Padding bottom</div>

<!-- Gap (Flexbox/Grid) -->
<div class="d-flex gap-2">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Display Utilities

<!-- Display Types -->
<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-flex">Flex</div>
<div class="d-inline-block">Inline block</div>

<!-- Responsive Display -->
<div class="d-none d-md-block">Hidden on mobile, visible on tablet+</div>
<div class="d-block d-md-none">Visible on mobile, hidden on tablet+</div>

Best Practices

Consistency: Use the design system consistently across your application
Accessibility: Ensure all interactive elements are keyboard accessible
Responsive: Test UI elements on all screen sizes
Performance: Optimize animations and transitions
Theming: Use CSS custom properties for easy theming
Documentation: Document custom components and their usage

Production Usage

All UI elements work without server-side dependencies in the static HTML edition. Interactive JavaScript is already bundled and optimized via Vite.

Documentation

Getting Started

Authentication

Livewire

Dashboard & Widgets

Applications

UI Components

Data Visualization

E-commerce

Job Board

Cryptocurrency

Advanced

UI Elements

UI Elements

Design System

Typography

Font Families

Headings

Text Utilities

Special Typography

Color Palette

Primary Colors

Theme Colors

Gradient Utilities

Background Animations

Cosmic Wave

Particle Effects

Interface Elements

Alerts

Buttons

Modals

Grid & Flexbox

Badges & Avatars

Popovers & Tooltips

Pagination

Toggles

Spacing Utilities

Display Utilities

Best Practices

Production Usage