• Set up FlyonUI with Astro using Tailwind CSS

Set up FlyonUI with Astro using Tailwind CSS

Integrate FlyonUI with Astro and Tailwind CSS to build a modern, responsive UI, optimizing your development process for efficiency.

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

Quick Astro setup

Astro is the all-in-one web framework designed for speed. If you haven't set up Tailwind CSS yet, check out Astro Tailwind CSS installation guides.

FlyonUI + Astro Checkout the 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

    Include FlyonUI JavaScript to the root_directory/src/layouts/Layout.astro file.

    ---
import "../styles/global.css";
---

<!DOCTYPE html>
<html lang="en">
  ...
</html>

<!-- Optional plugins -->
<script is:inline src="../node_modules/jquery/dist/jquery.min.js"></script>
<script is:inline src="../node_modules/lodash/lodash.js"></script>
<script is:inline src="../node_modules/datatables.net/js/dataTables.min.js"></script>
<script is:inline src="../node_modules/dropzone/dist/dropzone-min.js"></script>
<script is:inline src="../node_modules/nouislider/dist/nouislider.min.js"></script>

<!-- FlyonUI -->
<script is:inline src="../node_modules/flyonui/flyonui.js"></script>

    Note: If you want to include specific js component

    <script is:inline src="../node_modules/flyonui/dist/accordion.js"></script>    // Specific JS component

Icons

For icons setup you can refer Icons page.