Set up FlyonUI with Tailwind CSS Astro

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

This repository consists of two branches:

  • main: Contains the FlyonUI Starter Kit with Astro, offering a clean and scalable foundation to kickstart your project.
  • components: Showcases practical examples of FlyonUI component usage within a Astro environment
  • 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";  /* 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="../path/to/jquery/dist/jquery.min.js"></script> <script is:inline src="../path/to/lodash/lodash.js"></script> <script is:inline src="../path/to/datatables.net/js/dataTables.min.js"></script> <script is:inline src="../path/to/dropzone/dist/dropzone-min.js"></script> <script is:inline src="../path/to/nouislider/dist/nouislider.min.js"></script>  <!-- FlyonUI --> <script is:inline src="../path/to/flyonui/flyonui.js"></script> 

    Note: If you want to include specific js component

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

Icons

For icons setup you can refer Icons page.