Alpine Extension

The Alpine Extension provides Alpine.js on its own. This means that you should not add alpine to the package.json of your project.

The extension provides the following options:

export interface AlpineExtensionOptions {
    enableLivewire?: boolean;
    components?: {
        [key: string]: ComponentConstructor | AlpineComponent | any;
    };
}

Built-in Components

ToggleVisibility

A versatile component for creating dropdowns, modals, and toggleable elements with outside click detection.

Features:

• Toggle visibility with show/hide/toggle methods
• Automatic outside click handling to close
• CSS class management (adds/removes 'visible' class)
• Event-driven architecture

Usage:

<div x-data="ToggleVisibility">
    <button class="toggle-visibility">Toggle Content</button>
    <div x-show="visible" class="content">
        Hidden content that appears on toggle
    </div>
</div>

Learn more about ToggleVisibility →

TranslatedScroll

A horizontal scrolling component with transform-based smooth scrolling, touch/mouse drag support, and custom scrollbar.

Features:

• GPU-accelerated horizontal scrolling using CSS transforms
• Mouse wheel, touch, and drag interactions
• Optional custom draggable scrollbar
• Automatic resize handling with ResizeObserver
• Faded edges support for visual overflow indication

Usage:

<div x-data="TranslatedScroll({
    innerWrapperSelector: '.content',
    showScrollbar: true,
    enableMouseDrag: true
})">
    <div class="content">
        <!-- Wide scrollable content -->
    </div>
</div>

Learn more about TranslatedScroll →

Custom Components

You can create your own Alpine components by extending the AlpineComponent base class. Pass the component to the options of RunThemeExtensions:

import { AlpineComponent } from 'wly-statamic-theme-extensions';

class MyComponent extends AlpineComponent {
    public message: string = 'Hello World';
    
    public greet() {
        alert(this.message);
    }
}