🚀 How to Use FlyonUI Block with AI Tools?

Welcome to this in-depth tutorial on how to build a modern, AI-assisted landing page for a BBQ restaurant using FlyonUI, Copy Prompt, and Context7 MCP — all inside a Next.js project.

⚡ Whether you're a developer looking to speed up UI creation or someone curious about integrating AI tools into your dev workflow, this guide will walk you through every step.

Table of Contents

• 👨‍🏫 Introduction
• 🧱 What Are FlyonUI Blocks?
  • 🔍 Block Categories at a Glance
  • 🌮 Why Use FlyonUI Blocks?
• ⚙️ Starting with Different Framework and Technologies
• ✅ Steps:
  • 1. Copy–Paste FlyonUI Blocks
  • 2. Using Copy Prompt
• 🧠 Let’s build the BBQ Restaurant Landing Page with the Copy Prompt Feature
• 🛠️ How It Works
  • 1. 🔥 Hero Section
  • 2. 🏆 About Us Section
  • 3. 🍔 Menu Section
  • 4. 🛎️ Services Section
  • 5. 🎊 Testimonials
  • 6. 📞 Contact Us
  • 7. 🖥️ Footer
• How to Customise FlyonUI Blocks
  • 🍀 1. Direct Code Changes
  • 📌 Example: Adjusting Icon (Avatar) Size
  • 🍀 2. Customizing Components with Context7 MCP
  • 🔍 What is Context7 MCP?
  • ⚙️ Setup Context7 MCP
  • 📦 Example Use Case
• ✅ Conclusion
• 📺 Watch the Full Video

🧑‍💻 Introduction

Hey everyone! In this blog, we’ll walk you through how we built a fully responsive landing page for a BBQ restaurant using FlyonUI Blocks and some powerful AI tools.

We'll be using:

• FlyonUI Blocks
• The Copy Prompt feature
• And the Context7 MCP server

All inside a Next.js setup — it’s super fast, clean, and easy to extend.

🧾 What Are FlyonUI Blocks?

FlyonUI Blocks are a curated collection of 500+ ready-to-use layout sections built with Tailwind CSS, covering everything from marketing headers to dashboards, ecommerce pages, data tables, and more. Each block is customizable, responsive, accessible, and supports themes and RTL layouts.

FlyonUI is an open-source Tailwind Component library offering:

• 80+ standalone components, like buttons, cards, modals, alerts, switchers, accordions, and advanced selects
• Blocks built on top of components—500+ free and premium layout sections to compose pages quickly

🔍 Block Categories at a Glance

FlyonUI Blocks fall into five main categories:

Each section includes both free and pro options and is theme-ready with RTL support.

🎨 Why Use FlyonUI Blocks?

⚡ Jet‑Fast UI Composition

You can assemble entire pages by mixing and matching the Tailwind blocks—no repetitive boilerplate, just copy-paste or import.

🧩 Clean, Maintainable Code

Blocks use semantic class names built on Tailwind utilities for readable, modifiable markup that avoids class clutter.

🌈 Unlimited Theming

Support for multiple design themes (Light, Dark, Luxury, Corporate, etc.) without rewriting classes, plus full dark mode and RTL compatibility.

💡 Fully Customizable Interactivity

Includes headless JS plugins for accessible interactive components (dropdowns, accordions, overlays)—no additional frameworks needed.

🛠 Cross‑Framework Support

Works seamlessly in plain HTML or within React, Vue, Svelte, and other Tailwind-compatible environments.

⚙️ Starting with Different Frameworks and Technologies

FlyonUI provides framework integration guides for multiple frameworks. Most contain manual setup instructions and starter kits. We’ll be using the Next.js starter kit for this tutorial.

NextJs starterkit github

✅ Steps:

1. Clone the FlyonUI Next.js starter project

2. Install dependencies:
   

   npm install 

3. Run the development server:
   

   npm run dev 

💡 New to FlyonUI? Watch the Getting Started with FlyonUI | Beginner’s Guide ⚡️.

How to Use FlyonUI Blocks

There are multiple ways to use FlyonUI Blocks:

1. Copy-Paste FlyonUI Blocks

You can use the Copy button in the code section to grab the HTML. However, if the block contains CSS or JS, you must copy and integrate those separately into your project.

2. Using Copy Prompt

This feature lets you copy a complete code block (HTML, CSS, JS) using a structured prompt — ideal for feeding into AI tools.

🧠 Let’s build the BBQ Restaurant Landing Page with the Copy Prompt Feature

The Copy Prompt feature is a game-changer. It helps you instantly copy a structured prompt to feed into your favorite AI tool.

🛠 How It Works

Visit 👉 FlyonUI’s Tailwind CSS Blocks.

Use the pre-built prompts to generate your website sections using AI tools like VS Code, Cursor, or Windsurf.

1. 🔥 Hero Section

1. Go to the Hero section.

1. Select the block you want, then click the "Copy Prompt" button.
2. Paste it into your AI tool.

3. Add further custom instructions:
   

   Create a hero section related to my BBQ restaurant, so update the context accordingly. - Don't use image imports; use an HTML <img> tag instead. 

2. 👨‍🍳 About Us Section

1. Navigate to the About Us section.

1. Select the block you want, then click the "Copy Prompt" button.
2. Paste it into your AI tool.

3. Add further custom instructions:
   

   Create an About Us section using the above code, add it after the hero section, and update the image using Unsplash and context 

3. 🍖 Menu Section

1. Navigate to the Gallery, we will use this as the Menu section so we can display images.

1. Select the block you want, then click the "Copy Prompt" button.
2. Paste it into your AI tool.

3. Add further custom instructions:
   

   Create me the menu section with the help of the above Gallery code, keep the file name menu section, update the image from Unsplash, and also update the context accordingly 

4. Now, sometimes the image from Unsplash might be broken as they might be pro images, so we will update those with the help of AI
   

   Image-xzy is broken, change it to a working link, use a free Unsplash image 

4. 🛎️ Services Section

1. Go to the Blog, we will use it for Service section.

1. Select the block you want, then click the "Copy Prompt" button.
2. Paste it into your AI tool.

3. Add further custom instructions:
   

   Create a Services section for my BBQ restaurant (e.g., dine-in, catering, delivery). Place it after the menu section. 

5. 🌟 Testimonials

1. Visit the Testimonials section.

1. Select the block you want, then click the "Copy Prompt" button.
2. Paste it into your AI tool.

3. Add further custom instructions:
   

   Create a Testimonials section withthe provided code and add it after the service section 

6. 📞 Contact Us

1. Navigate to the Contact Us section.

1. Select the block you want, then click the "Copy Prompt" button.
2. Paste it into your AI tool.

3. Add further custom instructions:
   

   Create a booking section with the help of the above code and add it after the testimonials section 

7. 🔚 Footer

1. Go to the Footer section.

1. Select the block you want, then click the "Copy Prompt" button.
2. Paste it into your AI tool.

3. Add further custom instructions:
   

   Create me Footer section with the help above code and add it after the testimonials section 

How to Customise FlyonUI Blocks

There are two methods:

🧩 1. Direct Code Changes

Once a section is created, you might want to adjust things like icon sizes, spacing, padding, or margins to better match your design.

These changes can be done manually in the code.

📌 Example: Adjusting Icon (Avatar) Size

Let’s say you want to increase the size of an avatar icon. Here’s the original code:

<div class="avatar"> <div class="size-10 rounded-full"> <img src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png>" alt="avatar" /> </div> </div> 

To make the avatar larger, simply change size-10 to size-12:

<div class="avatar"> <div class="size-12 rounded-full"> <img src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png>" alt="avatar" /> </div> </div> 

✅ This small change increases the avatar size while keeping everything else intact.

🧩 2. Customizing Components with Context7 MCP

Once the landing page is complete, we’ll fine-tune the components — styles, layout, and design.

🔍 What is Context7 MCP?

Context7 MCP is a Model Context Provider that plugs into your AI tool (like Cursor or VS Code) to feed real-time, version-specific documentation from FlyonUI.

It helps you:

• Get accurate suggestions
• Modify components easily
• Stay updated with the latest UI patterns.

🔍 Setup Context7 MCP

Follow the setup instructions for your preferred code editor in the official FlyonUI Context7 MCP docs.

FlyonUI provides seamless integration for VS Code, Cursor, Windsurf, and Cline, allowing you to use AI-powered suggestions directly within your editor.

🧰 Example Use Case

We’ll update the theme and font family for our restaurant landing page

Use context7. Using FlyonUI, update the theme to "gourmet". I don't want light or dark, only gourmet. Update the font accordingly. 

Other things you can do with Context7:

• Change themes
• Modify component styles.
• Add component with just the prompt

example: Use context7, using FlyonUI, add Faq accordion after testimonials. Use the accordion shadow example. 

• Update colors, icons, spacing, fonts, and more

✅ Conclusion

And that’s a wrap! 🎉

You’ve now seen how to:

• Set up FlyonUI with Next.js
• Use the Copy Prompt to generate full UI blocks
• Build a clean landing page quickly
• Use Context7 MCP to customize and improve components using AI

This combination of tools drastically reduces manual coding while still giving you full control over design and structure.

📺 Watch the Full Video

Catch the full walkthrough in the video below.

Unlock The Full Potential of Tailwind AI with FlyonUI MCP 🤩

FlyonUI MCP is Tailwind AI Builder, a smart tool designed to help developers create Tailwind CSS components, blocks, and landing pages more efficiently.

Besides, it integrates directly into your IDE, allowing you to generate UI elements with simple prompts, inspired by the FlyonUI library.

Key Features:

The following are some of the awesome features that make FlyonUI MCP an awesome Tailwind AI Builder:

• Tailwind AI Builder: Generate intelligent layouts and components using AI.
• Framework Compatibility: Svelte, Nextjs, HTML, React, Nuxt, Vue
• Live Preview: See your UI evolve in real-time as you design.
• Blazing Fast Workflow: – Build and ship interfaces in minutes, not hours.
• Low-Code Workflow: Create components, blocks, or landing pages with just a few prompts.
• IDE Integration: Visual Studio Code, Cursor, Windsurf, VS Code + Cline.
• Prompt-Based Creation: Instantly create customized Tailwind blocks, pages & more.