Introduction

Ayro UI is a Bootstrap 5 and HTML5-based UI Component library. You can use Ayro UI to build Landing page templates, or websites by just copy-pasting the components.

Ayro UI comes with 300+ beautiful and essential UI components. These components are not just functional but also aesthetically pleasing.

Also, these components were created by following a very well-defined style guide. So, when you build a website with these components, you won’t have to make any design decisions whatsoever but the website will look great anyway.

🎬 Complete Ayro UI in 6 Mins - STEP BY STEP

TLDR;

Paste following lines on your HTML file under head tag to kickstart your project, this will load required assets and library.

 
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
 
    <!--====== Lineicons CSS ======-->
    <link rel="stylesheet" href="assets/css/lineicons.css" />
 
    <!--====== Starter CSS ======-->
    <link rel="stylesheet" href="assets/css/starter.css" />

Starter Template Example / Explained TLDR;

Download and extract Ayro UI then, create an HTML file in root directory, Copy-paste this code (given below) on your code editor and save it as index.html Now, you're ready to go! You can start using components that are listed on components page. If you want to know in detail, please explore other sections of doc, we explained everything you need to know.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--====== Required meta tags ======-->
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
    <!--====== Title ======-->
    <title>Home | Ayro UI</title>
 
    <!--====== Favicon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/png" />
 
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
 
    <!--====== Lineicons CSS ======-->
    <link rel="stylesheet" href="assets/css/lineicons.css" />
 
    <!--====== Style css ======-->
    <link rel="stylesheet" href="assets/css/starter.css" />
  </head>
 
  <body>
    
    <!--====== Start pasting component codes from here ======-->
 
  </body>
</html>

Quick start