• 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 Explore playground demo on StackBlitz
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Configure FlyonUI JavaScript paths

    Add the path to FlyonUI JavaScript files in your tailwind.config.js file.

    // tailwind.config.js
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/*.js',
  ],
  plugins: [
    require('flyonui'),
    require('flyonui/plugin')
  ],
};

    Note: If you want to include specific js component

    // tailwind.config.js
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/accordion.js', // Specific JS component
  ]
  ...
};
  • 3
    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 { Router } from "@solidjs/router";

...
import "flyonui/flyonui";
  • 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 { createSignal, createEffect } from "solid-js";
import { useLocation } from "@solidjs/router";

import { IStaticMethods } from "flyonui/flyonui";
declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

...

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

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

    window.HSStaticMethods.autoInit();
  });

  return (
    ...
  );
};

export default App;

    Note: If you want to include specific js component

    ...

import { type HSAccordion } from 'flyonui/flyonui';
declare global {
  interface Window {
    HSAccordion: typeof HSAccordion;
  }
}

...

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

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

    window.HSAccordion.autoInit();
  });

  return (
    ...
  );
};

export default App;