Astal.CSS Logo
AiraCSS was formly called Astral.CSS

AiraCSS : Craft Beautiful Web Interfaces, One Class at a Time.

Create beautiful, responsive web interfaces effortlessly using our robust CSS components.

Currently v3.0 · Download

Github Documentation

Installation

Install AiraCSS's source CSS and JavaScript files via npm. 

 npm i airacss

jsDelivr

When you only need to include AiraCSS's compiled CSS or JS, you can use jsDelivr.

See it in action with our simple starter template to jumpstart your next project. 

<link href="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/css/astral.css-v3.0.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/js/astral-v3.0.min.js"> </script >

Get started any way you want

You can dive right in and start building with AiraCSS! Just choose the option that works best for you: use the CDN or download the source code directly.

Read installation docs

Features

Extensive Components Library

AiraCSS offers a well-rounded collection of UI components, making it easier for developers to simplify their workflow and craft beautiful designs without building everything from the ground up.

Fully Responsive Design

Designed with a mobile-first approach, our framework ensures every component looks exceptional across all devices—be it desktop, tablet, or smartphone.

Modern

Enjoy a sleek, modern design that prioritizes user experience and keeps things simple for top-notch performance.

Easy Integration

You’ll find our framework easy to integrate into your existing projects, making it simple to mix and match components without any fuss.

How It Works

Download the CSS Framework

Start your journey by downloading the AiraCSS framework from our GitHub repository. Explore a wide range of components, all readily available to streamline your web development experience.

Explore the Component Library

Explore our vast collection of frontend components, crafted to elevate your web development projects. From forms and cards to navigation bars, we have everything you need to bring your ideas to life!

Customize and Combine

Effortlessly tailor components to fit your project’s needs. With AiraCSS, you have the tools to craft unique web interfaces that truly stand out.

AiraCSS Dark Mode

Effortlessly adapt between dark and light themes based on the user’s preference, ensuring a browsing experience tailored to your needs.

Dark theme

Dark theme panel
Card
I am a dark theme card
Link

Light Theme

Light theme panel
Card
I am a light theme card
Link
Read Docs

So easy to customize

Simply set your own CSS variables or override the default values.

// Set your own colors or override the default values
.red-theme{
--as-bg-card: #4c0014;
--as-bd-card: #4c0014;
--as-button-text: #660018;
--as-text-color: hsl(3, 100%, 90%);
--as-button-bg: hsl(3, 100%, 90%);
--as-border: hsl(3, 100%, 90%);
--as-button-hover-bg:hsla(4, 100%, 90%, 0.89);
--as-button-active-bg:hsla(4, 100%, 90%, 0.966);
--as-button-active-border:hsla(4, 100%, 90%, 0.966);
--as-box-shadow: 0 8px 24px rgba(102, 0, 24, 0.2);
--mode-bg:rgb(255, 235, 233);
--mode-color:#4c0014;
}

Before

Empower every person and every organization on the planet to achieve more.

After

Empower every person and every organization on the planet to achieve more.

AiraCSS Toastify

Aira.js offers a lightweight JavaScript notification module that makes it easy to display customizable toast messages on your webpage. Enjoy smooth CSS3 transitions for a sleek experience. Give it a try by clicking the buttons below!

Features of AiraCSS Toastify

Read Docs

Aira.js OTP Generator

A minimal JavaScript one-time password (OTP) generator module in Aira.js, designed to provide an easy and efficient way to generate secure OTPs for your web application.

Read Docs

Are you excited to take your web development to the next level?

Become part of the growing community of developers reshaping web interfaces with AiraCSS.

Download Now for Free