• Set up FlyonUI with Laravel using Tailwind CSS

Set up FlyonUI with Laravel using Tailwind CSS

Integrate FlyonUI with Laravel and Tailwind CSS to create a responsive, modern interface and streamline your project's design.

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

Quick Laravel setup

Laravel is most popular PHP web application framework with expressive, elegant syntax. If you haven't set up Tailwind CSS yet, check out Laravel Tailwind CSS installation guides.

Use this GitHub repository for a pre-configured FlyonUI Laravel Livewire Starter Kit.

  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Add FlyonUI plugin

    Include FlyonUI plugin in your main.css file.

    @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

    @source "../node_modules/flyonui/dist/accordion.js" // Specific JS component
  • 3
    Add the FlyonUI JavaScript

    Add the FlyonUI JavaScript in your app entry point app.js

    // index.js
import "flyonui/flyonui"

    Note: If you want to include specific js component

    import "../node_modules/flyonui/dist/accordion.js" // Import particular component JS
  • 4
    Loading your scripts

    Once your Vite entry points are configured, simply reference them using the @vite() Blade directive in the head tag of your application's main template.

    <!doctype html>
<head>
    {{-- ... --}}
    @vite('resources/css/app.css')
    @vite('resources/js/app.js')
</head>

Icons

For icons setup you can refer Icons page.