<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Pruthvi prajapati</title>
    <description>The latest articles on DEV Community by Pruthvi prajapati (@pruthvipraj00).</description>
    <link>https://dev.to/pruthvipraj00</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1488227%2Fddbd9d18-9d27-449d-b435-c35a4b25904d.jpeg</url>
      <title>DEV Community: Pruthvi prajapati</title>
      <link>https://dev.to/pruthvipraj00</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pruthvipraj00"/>
    <language>en</language>
    <item>
      <title>How to Automatically Split SaaS Revenue (Co-Founders, Affiliates &amp; Business partnerships) Using Creem</title>
      <dc:creator>Pruthvi prajapati</dc:creator>
      <pubDate>Wed, 25 Feb 2026 13:39:16 +0000</pubDate>
      <link>https://dev.to/pruthvipraj00/how-to-automatically-split-saas-revenue-co-founders-affiliates-marketplaces-using-creem-3g4</link>
      <guid>https://dev.to/pruthvipraj00/how-to-automatically-split-saas-revenue-co-founders-affiliates-marketplaces-using-creem-3g4</guid>
      <description>&lt;h2&gt;
  
  
  1. Why Revenue Splits Matter
&lt;/h2&gt;

&lt;p&gt;You finish a deal. The money lands in the account - after that comes the stage no one mentions - open a spreadsheet, work out each share, start the transfers and check that no name was skipped. For most founders who run revenue share schemes, this is simply Tuesday.&lt;/p&gt;

&lt;p&gt;Any expanding SaaS or product eventually faces the same complex challenge: cash will accumulate, and then you will need to determine who is going to receive what. No matter whether you are sharing the revenue with a co-founder, paying out affiliates on each referred sale, or paying contractors on a project-by-project basis, manual payouts are a formula for mistakes, missed deadlines, and broken trust.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Problem with Manual Payouts&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It’s slow and ends up being a waste of time when you have to calculate everything per transaction.&lt;/li&gt;
&lt;li&gt;The mistakes by human beings cause over- or under-payments.&lt;/li&gt;
&lt;li&gt;Late payments hurt relationships with partners and affiliates.&lt;/li&gt;
&lt;li&gt;The more recipients you add, the messier it gets.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Common Founder &amp;amp; Affiliate Payout Headaches&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Co-founders manually wired each other money after checking the bank&lt;/li&gt;
&lt;li&gt;Affiliates chasing unpaid commissions via email&lt;/li&gt;
&lt;li&gt;Contractors waiting weeks for revenue-share payments&lt;/li&gt;
&lt;li&gt;Incorrect splits are discovered only at tax time&lt;/li&gt;
&lt;li&gt;No visibility into what’s been paid vs. what’s pending&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;How Automatic Splits Solve This&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Automatic revenue splits mean that the payment is tied to the occurrence of a transaction. As soon as the payment is received, the platform directs the payment to all the recipients according to the rules set, without human intervention, without Excel, without the slow wire transfer. The payment of all is on time, and all splits are provided with a clean audit trail.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. What is Creem Revenue Splits?
&lt;/h2&gt;

&lt;p&gt;Creem Revenue Splits automatically divides incoming payments between multiple recipients based on rules you define. When programmed, splits operate on autopilot. Every eligible transaction produces the distribution immediately, and you, the human, do not even lift a finger.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Core Concept&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Think of a revenue split as a routing rule attached to your Creem store or product. When a payment arrives, Creem applies the split rule, calculates each recipient’s share, and routes the funds accordingly. Recipients receive their portion on the same payout schedule as you do.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;💡 Note:&lt;/strong&gt; Split payments incur a &lt;strong&gt;2% fee&lt;/strong&gt;. This fee is deducted from the transaction amount before any commission is distributed to recipients.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Percentage-Based&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;Each recipient gets a defined % of the transaction amount. Great for co-founders, affiliates, and revenue-share agreements where the split should scale with revenue.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example: 50% to Founder A, 50% to Founder B&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;When Splits Are Triggered&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;On a successful one-time purchase&lt;/li&gt;
&lt;li&gt;On each recurring subscription renewal&lt;/li&gt;
&lt;li&gt;On upsell or plan upgrade payments&lt;/li&gt;
&lt;li&gt;Not triggered on failed payments or free trials&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  3. Real-World Use Cases
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;👥 Co-Founder SaaS Split (50/50 Example)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Two co-founders launch a SaaS product. Rather than one founder collecting all revenue and manually wiring the other half to their partner each month, they configure a 50/50 split on Creem. Every subscription payment — new subscribers and renewals — is automatically split the moment it clears.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How it works in practice:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Customer pays $60 for any product
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd0sem0fhlva6747xs98c.png" alt="Product Added" width="800" height="96"&gt;
&lt;/li&gt;
&lt;li&gt;When someone purchases the product
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzmlhc35bu6r3cc5p9ywp.png" alt="Purahse" width="800" height="556"&gt;
&lt;/li&gt;
&lt;li&gt;Creem deducts 2% split fee ($1.2) from the transaction&lt;/li&gt;
&lt;li&gt;With a transaction charge 3.9% + $0.40 per transaction, the remaining $56.06 is split&lt;/li&gt;
&lt;li&gt;Both founders see the payout in their respective dashboards

&lt;ul&gt;
&lt;li&gt;$28.03 to Founder A, $28.03 to Founder B
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F05n5owknjsltcpygincx.png" alt="dashboard" width="800" height="284"&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;And Founder B can also see the amount in the payout section
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsulsbzhpka164gf9bk8f.png" alt="Founder B Payment section" width="800" height="280"&gt;
&lt;/li&gt;

&lt;li&gt;On subscription renewal, the same split fires automatically&lt;/li&gt;

&lt;li&gt;Any sales that occurred before the split was created will not be affected. As shown in the image below, there are two sales - one made before the split was added and one after - and only the latter is subject to the revenue split.&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wmhhckren5xbqkprd4m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wmhhckren5xbqkprd4m.png" alt="Before split sales" width="800" height="191"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What happens with refunds or failed payments?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If a customer is refunded, the split is reversed proportionally each recipient’s account is debited their share of the refund. Failed payments (e.g., expired card) don’t trigger a split because no funds were collected. If a payment is retried and succeeds, the split fires at that point.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Setting Up Revenue Splits in the Dashboard
&lt;/h2&gt;

&lt;p&gt;Before you can create a revenue split, your Creem store must be active, verified, and in good standing (no pending charges or high chargebacks). You also need at least one product in your store.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prerequisites Checklist&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Active and verified Creem store&lt;/li&gt;
&lt;li&gt;Store in good standing (low chargebacks, no pending issues)&lt;/li&gt;
&lt;li&gt;At least one product was created in your store&lt;/li&gt;
&lt;li&gt;Recipients must have (or create) a verified Creem store&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Step-by-Step: Creating Your First Split&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the &lt;strong&gt;Splits Hub&lt;/strong&gt; in your Creem dashboard left sidebar
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2l4r5drftre0s607ecmc.png" alt="Split Button" width="310" height="103"&gt;
&lt;/li&gt;
&lt;li&gt;Click &lt;strong&gt;“New Split”&lt;/strong&gt; on the splits overview page
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fasg8wrf0qaz54v5bbvkq.png" alt="create split" width="800" height="50"&gt;
&lt;/li&gt;
&lt;li&gt;Give your split a descriptive name (e.g., “Co-Founder 50/50” or “Affiliate Commission”)
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frih267rcphb5qn1g305c.png" alt="Add description" width="800" height="364"&gt;
&lt;/li&gt;
&lt;li&gt;Save the split — it becomes active immediately if StoreID is used, 
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuuq4wh8pl7i1mdk6ljnn.png" alt="Created split " width="800" height="130"&gt;
&lt;/li&gt;
&lt;li&gt;You can also delete any split id from the dashboard
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk8ch35vkbrbtuclnra8e.png" alt="Delete any split" width="800" height="301"&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Adding Recipients&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can add recipients in two ways. If the recipient already has a Creem store, enter their StoreID (found in their dashboard under Settings). Alternatively, enter their email address — Creem will send them an invitation to create and verify a store so they can receive payouts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;⚠️ Important:&lt;/strong&gt; Recipients must complete Creem’s onboarding and account verification before they can receive split payouts. Invite them early to avoid payout delays.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Viewing &amp;amp; Managing Splits&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All active splits appear on the Splits overview page&lt;/li&gt;
&lt;li&gt;Click any split to see transaction history and recipient details&lt;/li&gt;
&lt;li&gt;Add or remove recipients at any time&lt;/li&gt;
&lt;li&gt;Modify percentages — changes apply to future transactions only&lt;/li&gt;
&lt;li&gt;Recipients can see their commission payments in their own Activity tab&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  5. Payout Timing &amp;amp; Recipient Requirements
&lt;/h2&gt;

&lt;p&gt;Understanding when recipients get paid — and what they need to do before they can receive funds — is critical to setting expectations with partners and avoiding support headaches.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;When Recipients Receive Funds&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Recipients are paid on the same schedule as the merchant. Creem processes payouts on a regular cadence (typically weekly or bi-weekly, depending on your region and account standing). This means your affiliates, co-founders, and contractors don’t wait any longer than you do.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How Recipients Can Receive Funds&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bank transfer (standard ACH or international wire)&lt;/li&gt;
&lt;li&gt;E-wallet payments&lt;/li&gt;
&lt;li&gt;Stablecoin (USDC) payouts — useful for cross-border payments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Recipient Onboarding Requirements&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Recipients must create and verify their own Creem store&lt;/li&gt;
&lt;li&gt;KYC (Know Your Customer) verification is required before funds are released&lt;/li&gt;
&lt;li&gt;Recipients must connect a valid payout method (bank account, e-wallet, or crypto address)&lt;/li&gt;
&lt;li&gt;You can invite recipients by StoreID or email — they’ll receive onboarding instructions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;⚠️ What happens if a recipient isn’t verified?&lt;/strong&gt; Payouts will be held until the recipient completes verification. No funds are lost — they’re queued and released once KYC is complete. This is why it’s important to invite recipients &lt;em&gt;before&lt;/em&gt; you start processing payments.&lt;/p&gt;




&lt;h2&gt;
  
  
  6. Managing Refunds, Disputes &amp;amp; Adjustments
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;How Refunds Affect Splits&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When a customer is refunded, the split is reversed proportionally. Each recipient’s share is debited from their balance to cover their portion of the refund. This happens automatically — you don’t need to manually recover funds from recipients.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Chargeback Handling&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Chargebacks are disputes initiated by the customer’s bank. If a chargeback is filed on a transaction that was split, the dispute amount is deducted proportionally from all recipient balances. Creem handles the mechanics automatically, but you should notify your key recipients if a significant chargeback occurs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Best Practices for Financial Reconciliation&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use Creem’s split transaction history as your source of truth — every split is logged with timestamps and amounts&lt;/li&gt;
&lt;li&gt;Export split reports monthly for your accountant or finance team&lt;/li&gt;
&lt;li&gt;Ensure recipients understand that refunds and chargebacks will reduce their balance&lt;/li&gt;
&lt;li&gt;Document split agreements in a written contract outside of Creem — the platform enforces the numbers, but the legal agreement is yours&lt;/li&gt;
&lt;li&gt;Set up webhook logging so you have an independent audit trail&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  7. Advanced Revenue Split Patterns
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Tiered Affiliate Commissions&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Standard splits apply a single percentage to all transactions. For tiered commissions (e.g., 10% for the first $1,000 in sales, then 15% above that), implement the tier logic in your backend and dynamically assign different split rules depending on where the affiliate stands in their tier. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multiple Recipients (3+ Splits)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can add multiple recipients to a single split. For example, a three-founder startup might configure 40% to Founder A, 35% to Founder B, and 25% to Founder C. Creem distributes to all recipients simultaneously on every qualifying transaction. Make sure your percentages sum correctly — leaving a remainder means the difference stays in your store account.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Subscription Revenue Splits&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Revenue splits fire on every successful renewal, not just the initial purchase. This makes them ideal for SaaS co-founder arrangements. Both founders receive their share every month without any recurring manual action. If a subscription is paused, upgraded, or cancelled, splits only fire on actual successful payment events.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conditional Splits&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Need different splits for different products? Associate each split with specific products in your store. A platform might have a 90/10 split for premium sellers and an 85/15 split for standard sellers. Create separate split rules for each tier and attach them to the relevant products. &lt;/p&gt;




&lt;h2&gt;
  
  
  8. Best Practices for SaaS &amp;amp; Platform
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Keep percentages clean and easy to understand — avoid oddly specific numbers like 33.33% that can create rounding issues&lt;/li&gt;
&lt;li&gt;Document split agreements in writing outside of Creem — a signed agreement protects both parties&lt;/li&gt;
&lt;li&gt;Invite recipients before you go live — unverified recipients cause payout delays&lt;/li&gt;
&lt;li&gt;Monitor the Splits dashboard weekly — catch payout failures early before recipients notice&lt;/li&gt;
&lt;li&gt;Brief recipients on the 2% fee upfront — surprises damage trust&lt;/li&gt;
&lt;li&gt;Test splits in a staging/sandbox environment before going live&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  9. Conclusion
&lt;/h2&gt;

&lt;p&gt;Revenue splits are one of those features that seem simple on the surface but can dramatically change how you operate. Instead of devoting hours each month to manual payout calculations, wire transfers, and spreadsheet audits, you configure the rules once and let Creem handle distribution indefinitely.&lt;/p&gt;

&lt;p&gt;For co-founders, it eliminates money conversations that can strain working relationships. For affiliate programs, it means affiliates get paid instantly, which is one of the best ways to keep them motivated and actively promoting your product. For contractors and agencies, it removes the friction of invoicing cycles and creates a clean revenue-share arrangement that scales as the business grows.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;When to Use Revenue Splits&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Any time two or more parties share in the revenue of a product or service&lt;/li&gt;
&lt;li&gt;Affiliate programs where manual commission tracking creates overhead&lt;/li&gt;
&lt;li&gt;Contractor or agency arrangements with a percentage-based revenue share&lt;/li&gt;
&lt;li&gt;Platforms that need to route funds to sellers automatically&lt;/li&gt;
&lt;li&gt;Investment agreements requiring automated revenue distribution&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You currently divide revenue with a co-founder, an affiliate, or a contractor by hand. One misplaced decimal triggers an uncomfortable talk. Configure the split once inside Creem, and that talk never starts.&lt;/p&gt;

</description>
      <category>creem</category>
      <category>revenue</category>
      <category>payments</category>
      <category>automation</category>
    </item>
    <item>
      <title>🚀 How to Use FlyonUI Block with AI Tools?</title>
      <dc:creator>Pruthvi prajapati</dc:creator>
      <pubDate>Wed, 30 Jul 2025 12:16:10 +0000</pubDate>
      <link>https://dev.to/themeselection/how-to-use-flyonui-block-with-ai-tools-5b83</link>
      <guid>https://dev.to/themeselection/how-to-use-flyonui-block-with-ai-tools-5b83</guid>
      <description>&lt;p&gt;Welcome to this in-depth tutorial on how to build a modern, AI-assisted landing page for a BBQ restaurant using &lt;strong&gt;FlyonUI&lt;/strong&gt;, &lt;strong&gt;Copy Prompt&lt;/strong&gt;, and &lt;strong&gt;Context7 MCP&lt;/strong&gt; — all inside a &lt;strong&gt;Next.js&lt;/strong&gt; project.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⚡ 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.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Table of Contents
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;👨‍🏫 Introduction&lt;/li&gt;
&lt;li&gt;
🧱 What Are FlyonUI Blocks?

&lt;ul&gt;
&lt;li&gt;🔍 Block Categories at a Glance&lt;/li&gt;
&lt;li&gt;🌮 Why Use FlyonUI Blocks?&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;⚙️ Starting with Different Framework and Technologies&lt;/li&gt;

&lt;li&gt;

✅ Steps:

&lt;ul&gt;
&lt;li&gt;1. Copy–Paste FlyonUI Blocks&lt;/li&gt;
&lt;li&gt;2. Using Copy Prompt&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;🧠 Let’s build the BBQ Restaurant Landing Page with the Copy Prompt Feature&lt;/li&gt;

&lt;li&gt;

🛠️ How It Works

&lt;ul&gt;
&lt;li&gt;1. 🔥 Hero Section&lt;/li&gt;
&lt;li&gt;2. 🏆 About Us Section&lt;/li&gt;
&lt;li&gt;3. 🍔 Menu Section&lt;/li&gt;
&lt;li&gt;4. 🛎️ Services Section&lt;/li&gt;
&lt;li&gt;5. 🎊 Testimonials&lt;/li&gt;
&lt;li&gt;6. 📞 Contact Us&lt;/li&gt;
&lt;li&gt;7. 🖥️ Footer&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

How to Customise FlyonUI Blocks

&lt;ul&gt;
&lt;li&gt;🍀 1. Direct Code Changes&lt;/li&gt;
&lt;li&gt;📌 Example: Adjusting Icon (Avatar) Size&lt;/li&gt;
&lt;li&gt;🍀 2. Customizing Components with Context7 MCP&lt;/li&gt;
&lt;li&gt;🔍 What is Context7 MCP?&lt;/li&gt;
&lt;li&gt;⚙️ Setup Context7 MCP&lt;/li&gt;
&lt;li&gt;📦 Example Use Case&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;✅ Conclusion&lt;/li&gt;

&lt;li&gt;📺 Watch the Full Video&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  🧑‍💻 Introduction
&lt;/h2&gt;

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

&lt;p&gt;We'll be using:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;FlyonUI Blocks&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;Copy Prompt&lt;/strong&gt; feature&lt;/li&gt;
&lt;li&gt;And the &lt;strong&gt;Context7 MCP&lt;/strong&gt; server&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All inside a &lt;strong&gt;Next.js&lt;/strong&gt; setup — it’s super fast, clean, and easy to extend.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧾 What Are FlyonUI Blocks?
&lt;/h2&gt;

&lt;p&gt;FlyonUI Blocks are a curated collection of &lt;strong&gt;500+ ready-to-use layout sections&lt;/strong&gt; built with &lt;strong&gt;Tailwind CSS&lt;/strong&gt;, 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.&lt;/p&gt;

&lt;p&gt;FlyonUI is an open-source &lt;a href="https://flyonui.com/" rel="noopener noreferrer"&gt;Tailwind Component&lt;/a&gt; library offering:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;80+ standalone components&lt;/strong&gt;, like buttons, cards, modals, alerts, switchers, accordions, and advanced selects&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Blocks&lt;/strong&gt; built on top of components—500+ free and premium layout sections to compose pages quickly&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  🔍 Block Categories at a Glance
&lt;/h3&gt;

&lt;p&gt;FlyonUI Blocks fall into five main categories:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Marketing UI&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Hero sections, CTAs, feature highlights, testimonials&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Dashboard &amp;amp; App UI&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Layouts, widgets, modals, sidebars, charts, forms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;eCommerce UI&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Product cards, filters, reviews, cart, checkout flows&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Data Table UI&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Interactive tables, stats, filters, pagination&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Bento Grid UI&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Responsive grids and layout systems&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Each section includes both free and pro options and is theme-ready with RTL support.&lt;/p&gt;




&lt;h3&gt;
  
  
  🎨 Why Use FlyonUI Blocks?
&lt;/h3&gt;

&lt;p&gt;⚡ &lt;strong&gt;Jet‑Fast UI Composition&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can assemble entire pages by mixing and matching the &lt;a href="https://flyonui.com/blocks" rel="noopener noreferrer"&gt;Tailwind blocks&lt;/a&gt;—no repetitive boilerplate, just copy-paste or import.&lt;/p&gt;

&lt;p&gt;🧩 &lt;strong&gt;Clean, Maintainable Code&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Blocks use &lt;strong&gt;semantic class names&lt;/strong&gt; built on Tailwind utilities for readable, modifiable markup that avoids class clutter.&lt;/p&gt;

&lt;p&gt;🌈 &lt;strong&gt;Unlimited Theming&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;💡 &lt;strong&gt;Fully Customizable Interactivity&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Includes headless JS plugins for accessible interactive components (dropdowns, accordions, overlays)—no additional frameworks needed.&lt;/p&gt;

&lt;p&gt;🛠 &lt;strong&gt;Cross‑Framework Support&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Works seamlessly in plain HTML or within React, Vue, Svelte, and other Tailwind-compatible environments.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚙️ Starting with Different Frameworks and Technologies
&lt;/h2&gt;

&lt;p&gt;FlyonUI provides &lt;a href="https://flyonui.com/docs/getting-started/framework-guides/" rel="noopener noreferrer"&gt;framework integration guides&lt;/a&gt; for multiple frameworks. Most contain manual setup instructions and starter kits. We’ll be using the &lt;strong&gt;Next.js starter kit&lt;/strong&gt; for this tutorial.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/themeselection/flyonui-nextjs-integration" rel="noopener noreferrer"&gt;NextJs starterkit github&lt;/a&gt;  &lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Steps:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Clone the FlyonUI Next.js starter project&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Install dependencies:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Run the development server:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 New to FlyonUI? Watch the &lt;a href="https://youtu.be/9dvg1WaDhSc?si=Pix_yimx0o59wc_H" rel="noopener noreferrer"&gt;Getting Started with FlyonUI | Beginner’s Guide ⚡️&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  How to Use FlyonUI Blocks
&lt;/h2&gt;

&lt;p&gt;There are multiple ways to use FlyonUI Blocks:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Copy-Paste FlyonUI Blocks
&lt;/h3&gt;

&lt;p&gt;You can use the &lt;strong&gt;Copy&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdo2evruqy7dkoukvnmog.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdo2evruqy7dkoukvnmog.png" alt="Copy-Paste"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  2. Using Copy Prompt
&lt;/h3&gt;

&lt;p&gt;This feature lets you copy a &lt;strong&gt;complete code block&lt;/strong&gt; (HTML, CSS, JS) using a structured prompt — ideal for feeding into AI tools.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3jz8mm82f93z76m7vf2n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3jz8mm82f93z76m7vf2n.png" alt="Copy Prompt"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fltarc4jc5gl883mkq8gk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fltarc4jc5gl883mkq8gk.png" alt="Copy Prompt"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 Let’s build the BBQ Restaurant Landing Page with the Copy Prompt Feature
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;Copy Prompt&lt;/strong&gt; feature is a game-changer. It helps you instantly copy a structured prompt to feed into your favorite AI tool.&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠 How It Works
&lt;/h2&gt;

&lt;p&gt;Visit 👉 FlyonUI’s &lt;a href="https://flyonui.com/blocks" rel="noopener noreferrer"&gt;Tailwind CSS Blocks&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Use the pre-built prompts to generate your website sections using AI tools like &lt;strong&gt;VS Code&lt;/strong&gt;, &lt;strong&gt;Cursor&lt;/strong&gt;, or &lt;strong&gt;Windsurf&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  1. 🔥 Hero Section
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Go to the &lt;a href="https://flyonui.com/blocks/marketing-ui/hero-section" rel="noopener noreferrer"&gt;&lt;strong&gt;Hero&lt;/strong&gt;&lt;/a&gt; section.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqa92i67qds47i1588qte.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqa92i67qds47i1588qte.png" alt="Hero"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Select the block you want, then click the &lt;strong&gt;"Copy Prompt"&lt;/strong&gt; button.&lt;/li&gt;
&lt;li&gt;Paste it into your AI tool.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Add further custom instructions:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a hero section related to my BBQ restaurant, so update the context accordingly.
- Don't use image imports; use an HTML &amp;lt;img&amp;gt; tag instead.
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  2. 👨‍🍳 About Us Section
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the &lt;a href="https://flyonui.com/blocks/marketing-ui/about-us-page" rel="noopener noreferrer"&gt;&lt;strong&gt;About Us&lt;/strong&gt;&lt;/a&gt; section.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo3b3ay3ueceo9aism0jr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo3b3ay3ueceo9aism0jr.png" alt="About Us"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Select the block you want, then click the &lt;strong&gt;"Copy Prompt"&lt;/strong&gt; button.&lt;/li&gt;
&lt;li&gt;Paste it into your AI tool.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Add further custom instructions:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create an About Us section using the above code, add it after the hero section, and update the image using Unsplash and context
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  3. 🍖 Menu Section
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the &lt;strong&gt;&lt;a href="https://flyonui.com/blocks/marketing-ui/gallery-component" rel="noopener noreferrer"&gt;Gallery&lt;/a&gt;,&lt;/strong&gt; we will use this as the Menu section so we can display images. &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2dbqmi166h684l34y25f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2dbqmi166h684l34y25f.png" alt="Menu"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Select the block you want, then click the &lt;strong&gt;"Copy Prompt"&lt;/strong&gt; button.&lt;/li&gt;
&lt;li&gt;Paste it into your AI tool.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Add further custom instructions:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;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&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Image-xzy is broken, change it to a working link, use a free Unsplash image 
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  4. 🛎️ Services Section
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Go to the &lt;a href="https://flyonui.com/blocks/marketing-ui/blog-component" rel="noopener noreferrer"&gt;&lt;strong&gt;Blog&lt;/strong&gt;&lt;/a&gt;, we will use it for Service section.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8orw10lgaxfh7mij6grx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8orw10lgaxfh7mij6grx.png" alt="Services"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Select the block you want, then click the &lt;strong&gt;"Copy Prompt"&lt;/strong&gt; button.&lt;/li&gt;
&lt;li&gt;Paste it into your AI tool.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Add further custom instructions:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a Services section for my BBQ restaurant (e.g., dine-in, catering, delivery). Place it after the menu section.

&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  5. 🌟 Testimonials
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Visit the &lt;a href="https://flyonui.com/blocks/marketing-ui/testimonials-component" rel="noopener noreferrer"&gt;&lt;strong&gt;Testimonials&lt;/strong&gt;&lt;/a&gt; section.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdud0wrw1n8htmnaafqit.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdud0wrw1n8htmnaafqit.png" alt="Testimonials"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Select the block you want, then click the &lt;strong&gt;"Copy Prompt"&lt;/strong&gt; button.&lt;/li&gt;
&lt;li&gt;Paste it into your AI tool.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Add further custom instructions:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a Testimonials section withthe  provided code and add it after the service section
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  6. 📞 Contact Us
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the &lt;a href="https://flyonui.com/blocks/marketing-ui/contact-us-page" rel="noopener noreferrer"&gt;&lt;strong&gt;Contact Us&lt;/strong&gt;&lt;/a&gt; section.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkpftu35ihzyb0dnknq1t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkpftu35ihzyb0dnknq1t.png" alt="Contact Us&amp;lt;br&amp;gt;
"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Select the block you want, then click the &lt;strong&gt;"Copy Prompt"&lt;/strong&gt; button.&lt;/li&gt;
&lt;li&gt;Paste it into your AI tool.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Add further custom instructions:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a booking section with the help of the above code and add it after the testimonials section
&lt;/code&gt;&lt;/pre&gt;




&lt;/li&gt;

&lt;/ol&gt;




&lt;h3&gt;
  
  
  7. 🔚 Footer
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Go to the &lt;a href="https://flyonui.com/blocks/marketing-ui/footer-component" rel="noopener noreferrer"&gt;&lt;strong&gt;Footer&lt;/strong&gt;&lt;/a&gt; section.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwil4z1aqizcbif0q8vjl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwil4z1aqizcbif0q8vjl.png" alt="Footer"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Select the block you want, then click the &lt;strong&gt;"Copy Prompt"&lt;/strong&gt; button.&lt;/li&gt;
&lt;li&gt;Paste it into your AI tool.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Add further custom instructions:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Create me Footer section with the &lt;span class="nb"&gt;help &lt;/span&gt;above code and add it after the testimonials section
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  How to Customise FlyonUI Blocks
&lt;/h2&gt;

&lt;p&gt;There are two methods:&lt;/p&gt;

&lt;h3&gt;
  
  
  🧩 1. Direct Code Changes
&lt;/h3&gt;

&lt;p&gt;Once a section is created, you might want to adjust things like &lt;strong&gt;icon sizes&lt;/strong&gt;, &lt;strong&gt;spacing&lt;/strong&gt;, &lt;strong&gt;padding&lt;/strong&gt;, or &lt;strong&gt;margins&lt;/strong&gt; to better match your design.&lt;/p&gt;

&lt;p&gt;These changes can be done manually in the code.&lt;/p&gt;

&lt;h3&gt;
  
  
  📌 Example: Adjusting Icon (Avatar) Size
&lt;/h3&gt;

&lt;p&gt;Let’s say you want to increase the size of an avatar icon. Here’s the original code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"avatar"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"size-10 rounded-full"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png&amp;gt;"&lt;/span&gt;
    &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"avatar"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To make the avatar larger, simply change &lt;code&gt;size-10&lt;/code&gt; to &lt;code&gt;size-12&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"avatar"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"size-12 rounded-full"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png&amp;gt;"&lt;/span&gt;
    &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"avatar"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✅ This small change increases the avatar size while keeping everything else intact.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧩 2. Customizing Components with Context7 MCP
&lt;/h2&gt;

&lt;p&gt;Once the landing page is complete, we’ll &lt;strong&gt;fine-tune the components&lt;/strong&gt; — styles, layout, and design.&lt;/p&gt;

&lt;h3&gt;
  
  
  🔍 What is Context7 MCP?
&lt;/h3&gt;

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

&lt;p&gt;It helps you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Get accurate suggestions&lt;/li&gt;
&lt;li&gt;Modify components easily&lt;/li&gt;
&lt;li&gt;Stay updated with the latest UI patterns.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🔍 Setup Context7 MCP
&lt;/h3&gt;

&lt;p&gt;Follow the setup instructions for your preferred code editor in the &lt;a href="https://flyonui.com/docs/ai-mcp-setup/code-editors/" rel="noopener noreferrer"&gt;official FlyonUI Context7 MCP docs&lt;/a&gt;.&lt;/p&gt;

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




&lt;h3&gt;
  
  
  🧰 Example Use Case
&lt;/h3&gt;

&lt;p&gt;We’ll update the &lt;strong&gt;theme&lt;/strong&gt; and &lt;strong&gt;font family&lt;/strong&gt; for our restaurant landing page&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Use context7. Using FlyonUI, update the theme to "gourmet". I don't want light or dark, only gourmet. Update the font accordingly.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Other things you can do with Context7:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Change themes&lt;/li&gt;
&lt;li&gt;Modify component styles.&lt;/li&gt;
&lt;li&gt;Add component with just the prompt
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;example: Use context7, using FlyonUI, add Faq accordion after testimonials. 
Use the accordion shadow example.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Update colors, icons, spacing, fonts, and more&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ✅ Conclusion
&lt;/h2&gt;

&lt;p&gt;And that’s a wrap! 🎉&lt;/p&gt;

&lt;p&gt;You’ve now seen how to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Set up FlyonUI&lt;/strong&gt; with Next.js&lt;/li&gt;
&lt;li&gt;Use the &lt;strong&gt;Copy Prompt&lt;/strong&gt; to generate full UI blocks&lt;/li&gt;
&lt;li&gt;Build a clean &lt;strong&gt;landing page&lt;/strong&gt; quickly&lt;/li&gt;
&lt;li&gt;Use &lt;strong&gt;Context7 MCP&lt;/strong&gt; to customize and improve components using AI&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This combination of tools drastically reduces manual coding while still giving you full control over design and structure.&lt;/p&gt;




&lt;h2&gt;
  
  
  📺 Watch the Full Video
&lt;/h2&gt;

&lt;p&gt;Catch the full walkthrough in the video below.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/kc34UU9Zvm8"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;




&lt;h3&gt;
  
  
  Unlock The Full Potential of Tailwind AI with FlyonUI MCP 🤩
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffwppwftxgisemyibip19.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffwppwftxgisemyibip19.png" alt="FlyonUI MCP - Tailwind AI Builder"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;FlyonUI MCP is &lt;a href="https://flyonui.com/mcp" rel="noopener noreferrer"&gt;Tailwind AI&lt;/a&gt; Builder, a smart tool designed to help developers create Tailwind CSS components, blocks, and landing pages more efficiently.&lt;/p&gt;

&lt;p&gt;Besides, it integrates directly into your IDE, allowing you to generate UI elements with simple prompts, inspired by the FlyonUI library.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The following are some of the awesome features that make FlyonUI MCP an awesome Tailwind AI Builder:&lt;/p&gt;

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

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>tutorial</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
