• Set up FlyonUI with Tailwind CSS Qwik

Set up FlyonUI with Tailwind CSS Qwik

Combine FlyonUI with Qwik and Tailwind CSS to build a sleek, responsive interface, optimizing your development workflow for greater efficiency.

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

Quick Qwik setup

Qwik is an instant-loading framework with minimal overhead. If you haven't set up Tailwind CSS yet, check out Qwik Tailwind CSS installation guides.

FlyonUI + Qwik Check out the starterkit

This repository consists of two branches:

  • main: Contains the FlyonUI Starter Kit with Qwik, offering a clean and scalable foundation to kickstart your project.
  • components: Showcases practical examples of FlyonUI component usage within a Qwik environment
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Add FlyonUI plugin

    Include FlyonUI plugin in your global.css file.

    // global.css
@import "tailwindcss";
@plugin "flyonui";
@import "flyonui/variants.css";
@source "./node_modules/flyonui/flyonui"; 

/* 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"; */

    Note: If you want to include specific js component

    // global.css
@source "./node_modules/flyonui/dist/accordion.js" // Specific JS component
  • 3
    Add type definitions for FlyonUI

    Create the global.d.ts file in the project root directory.

    // global.d.ts
declare global {
  interface Window {
    // Optional third-party libraries
    _;
    $: typeof import("jquery");
    jQuery: typeof import("jquery");
    DataTable;
    Dropzone;

  }
}

export {};
  • 3
    Add the FlyonUI JavaScript

    Include FlyonUI JavaScript to the root_directory/src/root.tsx file.

    import { component$ } from "@builder.io/qwik";
import {
  QwikCityProvider,
  ...
} from "@builder.io/qwik-city";

// Optional third-party libraries
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;

...

export default component$(() => {
  return (
    <QwikCityProvider>
      ...
      <body>
        ...
        <script src="../path/to/flyonui/flyonui.js"></script>
      </body>
    </QwikCityProvider>
  );
});

    Note: If you want to include specific js component

    ...
<script src="../path/to/flyonui/dist/accordion.js"></script> // Add particular component JS
...

Icons

For icons setup you can refer Icons page.