• Set up FlyonUI with Tailwind CSS Svelte

Set up FlyonUI with Tailwind CSS Svelte

Learn how to configure FlyonUI in a Svelte project, integrating Tailwind CSS for enhanced and customizable 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.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>