• Set up FlyonUI with SolidJS using Tailwind CSS

Set up FlyonUI with SolidJS using Tailwind CSS

Integrate FlyonUI with SolidJS and Tailwind CSS to create a modern, responsive UI, simplifying your development workflow with ease.

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

Quick SolidJS setup

A tool for building simple, performant, and reactive user interfaces. If you haven't set up Tailwind CSS yet, check out SolidJS Tailwind CSS installation guides.

FlyonUI + SolidJS Check out the starterkit
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Add FlyonUI plugin

    Include FlyonUI plugin in your index.css file.

    // index.css
@import "tailwindcss";
@plugin "flyonui";
@import "flyonui/variants.css";
@source "./node_modules/flyonui/flyonui.js"; // Add only if node_modules is gitignored

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

    // index.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
import { IStaticMethods } from "flyonui/flyonui.js";

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

    HSStaticMethods: IStaticMethods;
  }
}

export {};

    Note: If you want to include specific js component

    // global.d.ts
import { HSAccordion } from "flyonui/flyonui.js";

declare global {
  interface Window {
    HSAccordion: typeof HSAccordion;
  }
}

export {};
  • 4
    Add the FlyonUI JavaScript

    Add the FlyonUI JavaScript in your app entry point root_directory/src/index.tsx

    import { render } from 'solid-js/web';

import 'flyonui/flyonui';
import App from './App';


const root = document.getElementById('root');

render(() => (
  <Router>
    <App />
  </Router>
), root!);
  • 4
    Add a reinitialization helper

    Add code to reinitialize the components each time the app is mounted or when the page changes in root_directory/src/App.tsx.

    import { useLocation } from '@solidjs/router';
import { createEffect, createSignal } from 'solid-js';
import { render } from 'solid-js/web';

...

async function loadFlyonUI() {
  return import('flyonui/flyonui.js');
}

...

const App = () => {
  const location = useLocation();
  const [_, setLoc] = createSignal(location.pathname);

  createEffect(() => {
    const initFlyonUI = async () => {
      await loadFlyonUI();
    };

    initFlyonUI();
  });

  createEffect(() => {
    setLoc(location.pathname);

    setTimeout(() => {
      if (
        window.HSStaticMethods &&
        typeof window.HSStaticMethods.autoInit === 'function'
      ) {
        window.HSStaticMethods.autoInit();
      }
    }, 100);
  });

  return (
    ...
  );
};

export default App;

    Note: If you want to include specific js component

    ...

async function loadFlyonUI() {
  return import('flyonui/dist/accordion.js');
}

...

const App = () => {
  const location = useLocation();
  const [_, setLoc] = createSignal(location.pathname);

  createEffect(() => {
    const initFlyonUI = async () => {
      await loadFlyonUI();
    };

    initFlyonUI();
  });

  createEffect(() => {
    setLoc(location.pathname);

    setTimeout(() => {
      if (
        window.HSAccordion &&
        typeof window.HSAccordion.autoInit === 'function'
      ) {
        window.HSAccordion.autoInit();
      }
    }, 100);
  });

  return (
    ...
  );
};

export default App;

Icons

For icons setup you can refer Icons page.