Preline UI

This guide will show you how to use Preline UI on WordPress websites using WindPress.

What is Preline UI?

Preline UI is an open-source library of prebuilt UI components designed to enhance web development with the utility-first Tailwind CSS framework. It offers over 840 accessible components, including elements like modals, buttons, alerts, and cards, enabling developers to swiftly design and customize responsive, mobile-first websites. Fully compatible with frameworks such as React and Vue, Preline UI supports dark mode variants and provides seamless integration with popular development tools. Additionally, it includes free templates and a comprehensive Figma design system, making it a valuable resource for developers aiming to expedite their project workflows.

Why use Preline UI?

• Extensive Component Library: Over 840 prebuilt, accessible UI components tailored for Tailwind CSS.
• Seamless Tailwind CSS Integration: Designed to work effortlessly with utility-first styling.
• Framework Compatibility: Supports React, Vue, and other modern frameworks.
• Dark Mode Support: Built-in variants for light and dark themes.
• Responsive & Mobile-First: Ensures a great user experience across all devices.
• Free & Open-Source: Available for use without cost, with a Pro version offering additional features.
• Figma Design System: Includes a comprehensive design system for UI/UX designers.
• Developer-Friendly: Provides detailed documentation and examples for easy implementation.

Using Preline UI on WordPress

Installing Preline UI on WordPress is easy with WindPress.

Step 1: Navigate to the WindPress admin screen

Navigate to the WindPress menu and switch to tailwind.config.js file editor.

Step 2: Add the Preline UI plugin

Add the following line of code to the tailwind.config.js file:

export default {
    /* ... */

    plugins: [
        require('preline/plugin'),
    ],

    /* ... */
}

Step 3: Use the Preline UI interactive elements

Preline UI comes with a set of interactive elements like modals, dropdowns, and more. To use these elements, you need to add the Preline UI JavaScript file to your WordPress website.

Add the following code to your theme's functions.php file or a Snippet plugin.

<?php

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('prelineui', 'https://esm.sh/preline/dist/preline.js?raw');
});

function register_prelineui_provider(array $providers): array {
    $providers[] = [
        'id' => 'prelineui',
        'name' => 'Preline UI Scanner',
        'description' => 'Scans the Preline UI interactive elements',
        'callback' => 'scanner_cb_prelineui_provider',
        'enabled' => \WindPress\WindPress\Utils\Config::get(sprintf(
            'integration.%s.enabled',
            'prelineui'
        ), true),
    ];

    return $providers;
}
add_filter('f!windpress/core/cache:compile.providers', 'register_prelineui_provider');

function scanner_cb_prelineui_provider(): array {
    return [
        [
            'name' => 'prelineui.min.js',
            'content' => file_get_contents('https://esm.sh/preline/dist/preline.js?raw'),
        ],
    ]
}