Apple Aqua-Inspired Glassmorphism UI Component Library – Aqua2

Category: Javascript | February 27, 2026
0 Comment
Authorthatdhruv
Last UpdateFebruary 27, 2026
LicenseMIT
Tags
Views50 views
OfficialGo to website
Live DemoDownload
Apple Aqua-Inspired Glassmorphism UI Component Library – Aqua2

Aqua2 is a vanilla JavaScript UI component library that recreates Apple’s classic Aqua design language as a set of drop-in web components.

It covers the full range of popular UI primitives: buttons, radio controls, checkboxes, text inputs, select menus, sliders, progress bars, scrollbars, and a segmented tab view.

There are no external dependencies, no build steps, and no framework requirements.

Features

  • Self-contained single file: aqua2.js injects all styles and activates all components.
  • Zero dependencies: Works with plain HTML. No jQuery, no React, no build pipeline.
  • Automatic component activation: Drop in the script and add the right class name. Every component initializes itself.
  • Full dark mode support: CSS custom properties switch between light and dark palettes automatically via prefers-color-scheme.
  • Glassmorphism aesthetics: All components use backdrop-filter: blur(), radial gradient highlights, and layered box shadows to achieve the classic Aqua glass look.
  • Graphite variant: Every component has a blue (aqua) and graphite color variant. Switch by changing the class prefix from aqua- to graphite-.
  • Spring physics animations: Checkboxes, sliders, tab indicators, and select panels all use cubic-bezier curves that mimic physical spring motion.
  • Pointer event handling: Sliders, scrollbars, and tab views use the Pointer Events API for consistent mouse, touch, and stylus support.

Use Cases:

  • Retro web applications: Build nostalgic tools mimicking early 2000s operating systems.
  • Themed dashboards: Create unique internal tools that break away from flat design trends.
  • Interactive portfolios: Showcase your work using a vintage user interface.

How To Use It:

1. Load the latest Aqua2 library before the closing body tag.

<script src="aqua2.js"></script>

2. That’s all the setup required. The script appends a <style> block to <head> with all component CSS and runs initialization logic for interactive components (sliders, selects, scrollbars, tab views).

<!-- Button Examples -->
<button class="aqua-button">Cancel</button>
<button class="aqua-button-focused">Continue</button>
<!-- Circular (icon/glyph) -->
<button class="aqua-button-circular"><!-- SVG --></button>
<button class="aqua-button-circular-focused"><!-- SVG --></button>
<!-- Square (image/larger glyph) -->
<button class="aqua-button-square"><!-- SVG / img --></button>
<button class="aqua-button-square-focused"><!-- SVG / img --></button>

Alternatives:

  • 98.css: This library provides a Windows 98 design system using pure CSS.
  • XP.css: This framework delivers a Windows XP visual style for web interfaces.
  • NES.css: This stylesheet creates 8-bit retro gaming interfaces.

See Also:

You Might Be Interested In:

Leave a Reply