Blocks

A Block refers to a segment of pre-designed code, crafted by professional designers and developers to provide reusable components or structures within a project. This modular approach helps streamline the development process, ensuring consistency and efficiency.

Before getting started, make sure your project is properly set up with FlyonUI. Refer to the official Getting Started / Installation docs for setup instructions.

Once your project is ready, you can begin integrating blocks seamlessly.

Access Pro Blocks:

FlyonUI offers over 500+ premium blocks and sections, which you can easily copy and use in your project. Here’s how to access them:

Step 1: Log In to Your Account

• Go to flyonui.com and log in using your credentials.

Step 2: Navigate to the Blocks Page

• Visit the Blocks page to explore categories like Marketing, eCommerce, Bento, Datatable, and more.

Step 3: Select and Copy the Code

• Choose your desired block (e.g., Hero Section).

• Click the Code tab to view the HTML, CSS, and JavaScript.

• If the block contains a Third-Party badge, setup the mentioned Third-Party package for the code to function properly.

• Copy the code and paste it into your project where needed.

Customizing blocks is easy with TailwindCSS and FlyonUI semantic classes. Here’s how you can do it:

1. Using TailwindCSS:

   • TailwindCSS provides utility classes to easily adjust the spacing, padding, margins, and other layout properties.

   • For example:

     • Padding: You can adjust padding using classes like p-2, p-4 (increasing the padding).

       <div class="p-4">
         <!-- Your content goes here -->
       </div>
       

     • Margins: Similarly, you can adjust margins using classes like m-2 or m-4.

       <div class="m-4">
         <!-- Your content goes here -->
       </div>
       

     • Gap: You can also use the gap class to adjust the space between elements within a flex or grid layout.

2. Using FlyonUI Semantic Classes:

   • FlyonUI offers predefined classes for common UI elements like buttons and backgrounds.

   • For example:

     • Change Button Style: You can change button styles using classes like btn-primary to btn-success to switch from a default button to a success button.

       <button class="btn btn-primary">Primary Button</button>
       
        To
       
       <button class="btn btn-success">Success Button</button>
       

3. Update Icons

   • Blocks use Tabler icons from Iconify/tabler, but you can also use any other font library of your choice. For more information, refer to the icon documentation .

With these simple tools, you can quickly adjust and style your blocks using both TailwindCSS and FlyonUI classes without needing to write extra CSS.

Example: /rui Update the layout of hero section from vertical to Horizontal.

Set up FlyonUI in your chosen framework. For detailed instructions, refer to the framework integration documentation.

Then, simply use the copy prompt functionality to copy the entire code and, with the help of the AI editor, convert it into a framework-specific format.

<!-- Block Prompt -->
 ....
<!-- /Block Prompt -->

Convert the above code into a React/Vue/Astro component with the correct structure.