• Setup FlyonUI with Svelte using Tailwind CSS.

Setup FlyonUI with Svelte using Tailwind CSS.

Configuring FlyonUI within a Svelte project while incorporating Tailwind CSS for enhanced styling.

https://cdn.flyonui.com/fy-assets/icons/svelte-icon.png
svelte logo

Quick Svelte setup

Svelte is a powerful JavaScript framework designed for building fast, efficient web applications. If you haven't configured Tailwind CSS yet, refer to the SvelteKit Tailwind CSS installation guide.

FlyonUI + Svelte Check out the staterkit
  • 1
    Install FlyonUI

    To get started, install flyonui via npm.

    npm i flyonui
  • 2
    Add FlyonUI plugin

    Include FlyonUI in your projects_root_directory/src/app.css file.

    @import "tailwindcss";
@plugin "flyonui";
@import "flyonui/variants.css"; /* Required for Js components */

@source "../node_modules/flyonui/flyonui/index.js"; /* Required for Js components */

/* Import Third-party override css */
/* @import "flyonui/src/vendor/flatpickr.css"; */
/* @import "flyonui/src/vendor/notyf.css"; */
/* @import "flyonui/src/vendor/datatables.css"; */
/* @import "flyonui/src/vendor/editor.css"; */
/* @import "flyonui/src/vendor/fullcalendar.css"; */
/* @import "flyonui/src/vendor/raty.css"; */
/* @import "flyonui/src/vendor/waves.css"; */
/* @import "flyonui/src/vendor/apexcharts.css"; */

...
  • 3
    Add type definitions for FlyonUI

    Add FlyonUI in projects_root_directory/src/app.d.ts file.

    import type { IStaticMethods } from "flyonui/flyonui";

declare global {
  interface Window {
    // Optional plugins
    _;
    $: typeof import("jquery");
    jQuery: typeof import("jquery");
    DataTable;
    Dropzone;

    // FlyonUI
    HSStaticMethods: IStaticMethods;
  }

  namespace App {
    ...
  }
}

export {};
  • 4
    Add the FlyonUI JavaScript

    Add the FlyonUI JavaScript in your app entry point projects_root_directory/src/lib/client/ init.ts file.

    // Optional plugins
import $ from "jquery";
import _ from "lodash";
import noUiSlider from "nouislider";
import "datatables.net";
import "dropzone/dist/dropzone-min.js";

window._ = _;
window.$ = $;
window.jQuery = $;
window.DataTable = $.fn.dataTable;
window.noUiSlider = noUiSlider;

// FlyonUI
import("flyonui/flyonui");

    Add the FlyonUI Hook projects_root_directory/src/ hooks.client.ts file.

    import "./lib/client/init";
  • 5
    Add a reinitialization helper

    Insert the code that reinitializes components whenever to ensure that FlyonUI.js is reinitialized after any DOM updates and navigation events changes in projects_root_directory/src/routes/+layout.svelte.

    <script>
  import { afterNavigate } from "$app/navigation";

  afterNavigate(() => {
    // Runs after navigating between pages
    HSStaticMethods.autoInit();
  });
</script>

Icons

For icons setup you can refer Icons page.

Hints and Tips

Passing parameters using data attributes. Observe how the object containing the parameters is wrapped in curly braces and how the slashes are properly escaped.

<div class="max-w-sm">
  <select
    data-select={`{
    "placeholder": "Select option...",
    "toggleTag": "<button type=\\"button\\" aria-expanded=\\"false\\"></button>",
    "toggleClasses": "advance-select-toggle select-disabled:pointer-events-none select-disabled:opacity-40",
    "dropdownClasses": "advance-select-menu",
    "optionClasses": "advance-select-option selected:select-active",
    "optionTemplate": "<div class=\\"flex justify-between items-center w-full\\"><span data-title></span><span class=\\"icon-[tabler--check] shrink-0 size-4 text-primary hidden selected:block \\"></span></div>",
    "extraMarkup": "<span class=\\"icon-[tabler--caret-up-down] shrink-0 size-4 text-base-content absolute top-1/2 end-3 -translate-y-1/2 \\"></span>"
    }`}
    class="hidden"
  >
    <option value="">Choose</option>
    <option value="name">Full Name</option>
    <option value="email">Email Address</option>
    <option value="description">Project Description</option>
    <option value="user_id">User Identification Number</option>
  </select>
</div>