aqua.css - Mac OS X Aqua Interface CSS Library

aqua.css

A CSS library for building interfaces that look like Apple's classic Aqua UI from Mac OS X 10.0 - 10.4 (2001-2005). Featuring glossy buttons, traffic light window controls, and that iconic blue gradient style.

Install: npm install aqua.css or use the CDN: <link rel="stylesheet" href="https://unpkg.com/aqua.css">

Use the Aqua Era selector in the sidebar to preview palette and texture changes across the 10.0-10.4 releases.

Aqua Era
▲ ▼
Adjusts palette, textures, and button shape to match each era.

Window

The classic Aqua window with brushed metal title bar and traffic light buttons (close, minimize, maximize/zoom).

×
−
+
My Window

This is a window with Aqua styling.

Show code 
<div class="window">
  <div class="title-bar">
    <div class="traffic-lights traffic-lights--always-colored">
      <div class="aqua-light aqua-red" role="button" tabindex="0" aria-label="Close"><span class="icon">×</span></div>
      <div class="aqua-light aqua-yellow" role="button" tabindex="0" aria-label="Minimize"><span class="icon">−</span></div>
      <div class="aqua-light aqua-green" role="button" tabindex="0" aria-label="Maximize"><span class="icon">+</span></div>
    </div>
    <div class="title-bar-text">My Window</div>
  </div>
  <div class="window-body">
    <p>This is a window with Aqua styling.</p>
  </div>
</div>

Inactive Window

Windows that are not in focus have grayed-out traffic lights.

×
−
+
Inactive Window

This window is not focused.

Show code 
<div class="window inactive">
  <div class="title-bar">
    <div class="traffic-lights">
      <div class="aqua-light aqua-red" role="button" tabindex="0" aria-label="Close"><span class="icon">×</span></div>
      <div class="aqua-light aqua-yellow" role="button" tabindex="0" aria-label="Minimize"><span class="icon">−</span></div>
      <div class="aqua-light aqua-green" role="button" tabindex="0" aria-label="Maximize"><span class="icon">+</span></div>
    </div>
    <div class="title-bar-text">Inactive Window</div>
  </div>
  <div class="window-body">
    <p>This window is not focused.</p>
  </div>
</div>

Brushed Metal

Authentic brushed metal texture from Mac OS X 10.3-10.5 era (2003-2007). Used in iTunes, QuickTime Player, Finder, and Safari.

Note: The authentic brushed metal effect requires canvas-based rendering with p5.js to accurately recreate the horizontal grain striations and Perlin noise texture. CSS gradients can only approximate the effect.

×
−
+
Window
Show code 
<div class="window brushed-metal-authentic" style="width: 100%; max-width: 520px; position: relative; overflow: hidden;">
  <!-- Metal canvas renders behind everything -->
  <div id="metal-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>

  <!-- Title bar overlays the metal (transparent background) -->
  <div class="title-bar" style="background: transparent; position: relative; z-index: 1; border-bottom: none;">
    <div class="traffic-lights traffic-lights--always-colored">
      <div class="aqua-light aqua-red" role="button" tabindex="0" aria-label="Close"><span class="icon">×</span></div>
      <div class="aqua-light aqua-yellow" role="button" tabindex="0" aria-label="Minimize"><span class="icon">−</span></div>
      <div class="aqua-light aqua-green" role="button" tabindex="0" aria-label="Maximize"><span class="icon">+</span></div>
    </div>
    <!-- Title centered across full width, overlapping traffic lights layer -->
    <div class="title-bar-text" style="position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;">Window</div>
  </div>

  <!-- Window body is also transparent -->
  <div class="window-body" style="background: transparent; position: relative; z-index: 1; min-height: 280px;">
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script>
  function setup() {
    let container = document.getElementById('metal-container');
    let c = createCanvas(container.offsetWidth, container.offsetHeight);
    c.parent('metal-container');
    pixelDensity(1);
    noLoop();
    drawMetal();
  }

  function drawMetal() {
    loadPixels();

    let centerX = width / 2;
    let baseGray = 163;
    let lightBrightness = 41;
    let noiseStrength = 20;
    let lightConcentration = 1.8;

    for (let y = 0; y < height; y++) {
      let rowOffset = random(0, 10000);

      for (let x = 0; x < width; x++) {
        let index = (x + y * width) * 4;

        // Horizontal grain texture using Perlin noise
        let n = noise(x * 0.02 + rowOffset);
        let grain = map(n, 0, 1, -noiseStrength, noiseStrength);

        // Center specular highlight (Gaussian falloff)
        let normDist = (x - centerX) / (width / 2);
        let light = Math.exp(-Math.pow(normDist * lightConcentration, 2)) * lightBrightness;

        let finalColor = constrain(baseGray + light + grain, 0, 255);

        pixels[index + 0] = finalColor;
        pixels[index + 1] = finalColor;
        pixels[index + 2] = finalColor;
        pixels[index + 3] = 255;
      }
    }
    updatePixels();
  }
</script>

CSS + SVG Filter Implementation

Alternative approach using SVG filters for the brushed texture. This method uses feTurbulence for procedural noise and doesn't require JavaScript.

×
−
+
Window
Show code 
<div class="window brushed-metal-authentic" style="width: 100%; max-width: 520px; position: relative; overflow: hidden;">
  <!-- Brushed metal background -->
  <svg viewBox="0 0 520 320" preserveAspectRatio="none" aria-hidden="true" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;">
    <defs>
      <!-- Gaussian-like center highlight: intensity=79, width=8.80, edgeBlur=17.01, baseGray=157 -->
      <linearGradient id="metalSheen" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0.0%" stop-color="rgb(158,158,158)"/>
        <stop offset="5.9%" stop-color="rgb(159,159,159)"/>
        <stop offset="11.8%" stop-color="rgb(163,163,163)"/>
        <stop offset="17.6%" stop-color="rgb(169,169,169)"/>
        <stop offset="23.5%" stop-color="rgb(179,179,179)"/>
        <stop offset="29.4%" stop-color="rgb(194,194,194)"/>
        <stop offset="35.3%" stop-color="rgb(210,210,210)"/>
        <stop offset="41.2%" stop-color="rgb(226,226,226)"/>
        <stop offset="47.1%" stop-color="rgb(235,235,235)"/>
        <stop offset="52.9%" stop-color="rgb(235,235,235)"/>
        <stop offset="58.8%" stop-color="rgb(226,226,226)"/>
        <stop offset="64.7%" stop-color="rgb(210,210,210)"/>
        <stop offset="70.6%" stop-color="rgb(194,194,194)"/>
        <stop offset="76.5%" stop-color="rgb(179,179,179)"/>
        <stop offset="82.4%" stop-color="rgb(169,169,169)"/>
        <stop offset="88.2%" stop-color="rgb(163,163,163)"/>
        <stop offset="94.1%" stop-color="rgb(159,159,159)"/>
        <stop offset="100.0%" stop-color="rgb(158,158,158)"/>
      </linearGradient>

      <filter id="metalTexture" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <!-- Displacement source - creates row-varying offsets -->
        <feTurbulence type="fractalNoise" baseFrequency="0.001 0.6" numOctaves="2" seed="5" result="displace"/>

        <!-- Main horizontal texture -->
        <feTurbulence type="fractalNoise" baseFrequency="0.015 1.4" numOctaves="2" seed="17" result="texture"/>

        <!-- Warp texture based on displacement - mimics per-row offset -->
        <feDisplacementMap in="texture" in2="displace" scale="50" xChannelSelector="R" yChannelSelector="G" result="warped"/>

        <!-- Strong horizontal blur for brush strokes -->
        <feGaussianBlur in="warped" stdDeviation="12 0" result="streak"/>

        <!-- Ensure grayscale -->
        <feColorMatrix in="streak" type="saturate" values="0" result="gray"/>

        <!-- Adjust contrast to match JS noiseStrength ~20 -->
        <feComponentTransfer in="gray" result="adjusted">
          <feFuncR type="linear" slope="0.8" intercept="0.1"/>
          <feFuncG type="linear" slope="0.8" intercept="0.1"/>
          <feFuncB type="linear" slope="0.8" intercept="0.1"/>
        </feComponentTransfer>

        <!-- Blend with source -->
        <feBlend in="SourceGraphic" in2="adjusted" mode="soft-light"/>
      </filter>
    </defs>
    <rect width="520" height="320" fill="url(#metalSheen)" filter="url(#metalTexture)"/>
  </svg>

  <!-- Title bar overlays the metal (transparent background) -->
  <div class="title-bar" style="background: transparent; position: relative; z-index: 1; border-bottom: none;">
    <div class="traffic-lights traffic-lights--always-colored">
      <div class="aqua-light aqua-red" role="button" tabindex="0" aria-label="Close"><span class="icon">×</span></div>
      <div class="aqua-light aqua-yellow" role="button" tabindex="0" aria-label="Minimize"><span class="icon">−</span></div>
      <div class="aqua-light aqua-green" role="button" tabindex="0" aria-label="Maximize"><span class="icon">+</span></div>
    </div>
    <!-- Title centered across full width, overlapping traffic lights layer -->
    <div class="title-bar-text" style="position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;">Window</div>
  </div>

  <!-- Window body -->
  <div class="window-body" style="background: transparent; position: relative; z-index: 1; min-height: 280px;"></div>
</div>

Buttons

Standard Buttons
Button Types
Size Variants (from Apple HIG)
13px font
11px font
9px font
Pill Buttons (Segmented Control)
Color Variants
Button States
Normal
Pressed/Armed
Standard Buttons
Button Types
Size Variants (from Apple HIG)
13px font
11px font
9px font
Pill Buttons (Segmented Control)
Button States
Normal
Pressed/Armed
Show code 
<!-- Pre-10.6 era buttons (aqua-button style) -->
<div class="era-pre-10-6">
  <div class="label">Standard Buttons</div>
  <div class="component-row">
    <button class="aqua-button aqua-button--secondary"><span>Cancel</span></button>
    <button class="aqua-button default"><span>Default</span></button>
    <button class="aqua-button default pulse"><span>Pulsing</span></button>
    <button class="aqua-button aqua-button--secondary" disabled><span>Disabled</span></button>
  </div>

  <div class="label" style="margin-top: 15px;">Button Types</div>
  <div class="component-row">
    <button class="aqua-button aqua-button--secondary"><span>Regular</span></button>
    <button class="aqua-button help" aria-label="Help"><span>?</span></button>
  </div>

  <div class="label" style="margin-top: 15px;">Size Variants (from Apple HIG)</div>
  <div class="component-row">
    <div class="component-group">
      <button class="aqua-button aqua-button--secondary"><span>Regular</span></button>
      <span class="state-label">13px font</span>
    </div>
    <div class="component-group">
      <button class="aqua-button aqua-button--secondary small"><span>Small</span></button>
      <span class="state-label">11px font</span>
    </div>
    <div class="component-group">
      <button class="aqua-button aqua-button--secondary mini"><span>Mini</span></button>
      <span class="state-label">9px font</span>
    </div>
  </div>

  <div class="label" style="margin-top: 15px;">Pill Buttons (Segmented Control)</div>
  <div class="component-row">
    <div class="pill-group">
      <button class="aqua-button aqua-button--secondary left-pill"><span>Left</span></button>
      <button class="aqua-button aqua-button--secondary center-pill"><span>Center</span></button>
      <button class="aqua-button aqua-button--secondary right-pill"><span>Right</span></button>
    </div>
    <div class="segmented-control" style="margin-left: 10px;">
      <button class="aqua-button aqua-button--secondary active" aria-pressed="true"><span>Left</span></button>
      <button class="aqua-button aqua-button--secondary"><span>Center</span></button>
      <button class="aqua-button aqua-button--secondary"><span>Right</span></button>
    </div>
  </div>

  <div class="label" style="margin-top: 15px;">Color Variants</div>
  <div class="component-row">
    <button class="aqua-button aqua-button--secondary"><span>Cancel</span></button>
    <button class="aqua-button default"><span>Default</span></button>
    <button class="aqua-button aqua-button--orange"><span>Login</span></button>
    <button class="aqua-button default armed"><span>Pressed</span></button>
    <button class="aqua-button mini aqua-button--secondary"><span>Mini</span></button>
  </div>

  <div class="label" style="margin-top: 15px;">Button States</div>
  <div class="states-demo">
    <div class="state-box">
      <button class="aqua-button aqua-button--secondary"><span>Normal</span></button>
      <div class="state-label">Normal</div>
    </div>
    <div class="state-box">
      <button class="aqua-button aqua-button--secondary armed"><span>Pressed</span></button>
      <div class="state-label">Pressed/Armed</div>
    </div>
  </div>
</div>

<!-- 10.6+ era buttons (flat style) -->
<div class="era-10-6-plus">
  <div class="label">Standard Buttons</div>
  <div class="component-row">
    <button>Button</button>
    <button class="default">Default</button>
    <button class="default pulse">Pulsing</button>
    <button disabled>Disabled</button>
  </div>

  <div class="label" style="margin-top: 15px;">Button Types</div>
  <div class="component-row">
    <button>Regular</button>
    <button class="round-rect">Round Rect</button>
    <button class="help" aria-label="Help">?</button>
  </div>

  <div class="label" style="margin-top: 15px;">Size Variants (from Apple HIG)</div>
  <div class="component-row">
    <div class="component-group">
      <button>Regular</button>
      <span class="state-label">13px font</span>
    </div>
    <div class="component-group">
      <button class="small">Small</button>
      <span class="state-label">11px font</span>
    </div>
    <div class="component-group">
      <button class="mini">Mini</button>
      <span class="state-label">9px font</span>
    </div>
  </div>

  <div class="label" style="margin-top: 15px;">Pill Buttons (Segmented Control)</div>
  <div class="component-row">
    <div class="pill-group">
      <button class="left-pill">Left</button>
      <button class="center-pill">Center</button>
      <button class="right-pill">Right</button>
    </div>
    <div class="segmented-control" style="margin-left: 10px;">
      <button class="active" aria-pressed="true">Left</button>
      <button>Center</button>
      <button>Right</button>
    </div>
  </div>

  <div class="label" style="margin-top: 15px;">Button States</div>
  <div class="states-demo">
    <div class="state-box">
      <button>Normal</button>
      <div class="state-label">Normal</div>
    </div>
    <div class="state-box">
      <button class="armed">Pressed</button>
      <div class="state-label">Pressed/Armed</div>
    </div>
  </div>
</div>

Form Controls

Text Inputs

Regular (square corners)
Search (with icon)
Round Rect
Disabled
Password
Show code 
<div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start;">
  <div>
    <span class="label">Regular (square corners)</span><br>
    <input class="aqua-textfield" type="text" placeholder="Enter text...">
  </div>

  <div>
    <span class="label">Search (with icon)</span><br>
    <input class="aqua-textfield search" type="text" placeholder="Search...">
  </div>

  <div>
    <span class="label">Round Rect</span><br>
    <input class="aqua-textfield round-rect" type="text" placeholder="Round rect...">
  </div>

  <div>
    <span class="label">Disabled</span><br>
    <input class="aqua-textfield" type="text" placeholder="Disabled" disabled>
  </div>

  <div>
    <span class="label">Password</span><br>
    <input class="aqua-textfield" type="password" value="••••••••">
  </div>
</div>

Select Dropdown

▲ ▼
Show code 
<div class="field-row">
  <label for="select">Choose an option:</label>
  <div class="select-wrapper">
    <select id="select">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
    <span class="select-button"></span>
    <span class="select-arrows">
      <span class="arrow-up">&#9650;</span>
      <span class="arrow-down">&#9660;</span>
    </span>
  </div>
</div>

Combobox

Text input combined with a dropdown button.

Show code 
<div class="combobox" style="width: 200px;">
  <input type="text" value="Automatic">
</div>

Listbox

Mac OS 10.1 style listbox with wave scrollbar. The scrollbar uses data-scrollbar-for to connect to any scrollable element.

  • 640 x 480
  • 800 x 600
  • 1024 x 768
  • 1152 x 864
  • 1280 x 720
  • 1280 x 768
  • 1280 x 960
  • 1280 x 1024
  • 1360 x 768
  • 1440 x 900
  • 1600 x 900
  • 1680 x 1050
  • 1920 x 1080
Show code 
<div class="aqua-listbox" style="width: 220px; height: 200px;">
  <div class="aqua-listbox-content" id="aqua-listbox-content">
    <ul class="aqua-listbox-list" role="listbox" id="aqua-listbox-list">
      <li class="aqua-listbox-item" role="option">640 x 480</li>
      <li class="aqua-listbox-item" role="option">800 x 600</li>
      <li class="aqua-listbox-item selected" role="option" aria-selected="true">1024 x 768</li>
      <li class="aqua-listbox-item" role="option">1152 x 864</li>
      <li class="aqua-listbox-item" role="option">1280 x 720</li>
      <li class="aqua-listbox-item" role="option">1280 x 768</li>
      <li class="aqua-listbox-item" role="option">1280 x 960</li>
      <li class="aqua-listbox-item" role="option">1280 x 1024</li>
      <li class="aqua-listbox-item" role="option">1360 x 768</li>
      <li class="aqua-listbox-item" role="option">1440 x 900</li>
      <li class="aqua-listbox-item" role="option">1600 x 900</li>
      <li class="aqua-listbox-item" role="option">1680 x 1050</li>
      <li class="aqua-listbox-item" role="option">1920 x 1080</li>
    </ul>
  </div>
  <div class="scrollbar vertical" data-scrollbar-for="aqua-listbox-content">
    <div class="scrollbar-cap aqua-glass-v"></div>
    <div class="scrollbar-track">
      <div class="scrollbar-thumb-v">
        <div class="scrollbar-wave-ink-v">
          <div class="scrollbar-wave-shimmer-v"></div>
        </div>
      </div>
    </div>
    <div class="scrollbar-buttons aqua-glass-v">
      <button type="button" title="Scroll up">&#9650;</button>
      <button type="button" title="Scroll down">&#9660;</button>
    </div>
  </div>
</div>

Native select[multiple] fallback:

Show code 
<select multiple style="width: 200px; height: 120px;">
  <option>Documents</option>
  <option selected>Pictures</option>
  <option>Music</option>
  <option>Movies</option>
  <option>Downloads</option>
</select>

Checkboxes

Show code 
<div class="field-row">
  <label class="checkbox">
    <input type="checkbox" checked>
    <span class="box"><span class="mark"></span></span>
    <span>Checked checkbox</span>
  </label>
</div>
<div class="field-row">
  <label class="checkbox">
    <input type="checkbox">
    <span class="box"><span class="mark"></span></span>
    <span>Unchecked checkbox</span>
  </label>
</div>
<div class="field-row">
  <label class="checkbox">
    <input type="checkbox" disabled checked>
    <span class="box"><span class="mark"></span></span>
    <span>Disabled checked</span>
  </label>
</div>

Radio Buttons

Show code 
<div class="field-row">
  <label class="radio">
    <input type="radio" name="radio-class-group" checked>
    <span class="circle"><span class="dot"></span></span>
    <span>Option A</span>
  </label>
</div>
<div class="field-row">
  <label class="radio">
    <input type="radio" name="radio-class-group">
    <span class="circle"><span class="dot"></span></span>
    <span>Option B</span>
  </label>
</div>
<div class="field-row">
  <label class="radio">
    <input type="radio" name="radio-class-group">
    <span class="circle"><span class="dot"></span></span>
    <span>Option C</span>
  </label>
</div>

Progress Bar

Determinate (60%)
Determinate (30%)
Complete (100%)
Indeterminate
Disabled (50%)
Show code 
<div style="display: grid; gap: 20px;">
  <div>
    <span class="label">Determinate (60%)</span>
    <div class="progress-wave" style="--p: 60; --h: 13px; width: 200px;">
      <div class="progress-wave__fill">
        <div class="progress-wave__ink" aria-hidden="true">
          <span class="progress-wave__shimmer"></span>
        </div>
      </div>
    </div>
  </div>
  <div>
    <span class="label">Determinate (30%)</span>
    <div class="progress-wave" style="--p: 30; --h: 13px; width: 200px;">
      <div class="progress-wave__fill">
        <div class="progress-wave__ink" aria-hidden="true">
          <span class="progress-wave__shimmer"></span>
        </div>
      </div>
    </div>
  </div>
  <div>
    <span class="label">Complete (100%)</span>
    <div class="progress-wave" style="--p: 100; --h: 13px; width: 200px;">
      <div class="progress-wave__fill">
        <div class="progress-wave__ink" aria-hidden="true">
          <span class="progress-wave__shimmer"></span>
        </div>
      </div>
    </div>
  </div>
  <div>
    <span class="label">Indeterminate</span>
    <div class="aqua-progress indeterminate">
      <div class="stripes">
        <div class="stripes-inner">
          <div class="stripe"></div>
          <div class="stripe"></div>
          <div class="stripe"></div>
          <div class="stripe"></div>
          <div class="stripe"></div>
          <div class="stripe"></div>
          <div class="stripe"></div>
          <div class="stripe"></div>
          <div class="stripe"></div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <span class="label">Disabled (50%)</span>
    <div class="progress-wave disabled" style="--p: 50; --h: 13px; width: 200px;">
      <div class="progress-wave__fill">
        <div class="progress-wave__ink" aria-hidden="true">
          <span class="progress-wave__shimmer"></span>
        </div>
      </div>
    </div>
  </div>
</div>

Progress Indicator / Spinner / Loader

Animated loading indicators for determinate and indeterminate progress states.

Circular Progress Indicator

Circular (75%)
75%
Circular (25%)
25%
Complete
100%
Show code 
<div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: center;">
  <div>
    <span class="label">Circular (75%)</span><br>
    <div class="aqua-progress-indicator" style="--progress: 75;">
      <div class="indicator"></div>
      <div class="progress"></div>
      <span class="percentage">75%</span>
    </div>
  </div>

  <div>
    <span class="label">Circular (25%)</span><br>
    <div class="aqua-progress-indicator" style="--progress: 25;">
      <div class="indicator"></div>
      <div class="progress"></div>
      <span class="percentage">25%</span>
    </div>
  </div>

  <div>
    <span class="label">Complete</span><br>
    <div class="aqua-progress-indicator complete" style="--progress: 100;">
      <div class="indicator"></div>
      <div class="progress"></div>
      <span class="tick" aria-hidden="true"></span>
      <span class="percentage">100%</span>
    </div>
  </div>
</div>

Spinner Indicator

Spinning (Indeterminate)
Spinner (Large)
Ring Spinner
Ring Spinner (Large)
Show code 
<div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: center;">
  <div>
    <span class="label">Spinning (Indeterminate)</span><br>
    <div class="aqua-spinner-indicator" aria-label="Loading">
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
    </div>
  </div>

  <div>
    <span class="label">Spinner (Large)</span><br>
    <div class="aqua-spinner-indicator large" aria-label="Loading">
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
    </div>
  </div>

  <div>
    <span class="label">Ring Spinner</span><br>
    <div class="spinner animate"></div>
  </div>

  <div>
    <span class="label">Ring Spinner (Large)</span><br>
    <div class="spinner-large animate"></div>
  </div>
</div>

Cursor

Animated cursor indicators.

Pinwheel
Show code 
<div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: center;">
  <div>
    <span class="label">Pinwheel</span><br>
    <div class="spinner-container">
      <div class="static-rainbow-bg bg-smooth-rainbow"></div>
      <div class="spinning-pinwheel">
        <div class="blade"></div>
        <div class="blade"></div>
        <div class="blade"></div>
        <div class="blade"></div>
        <div class="blade"></div>
      </div>
    </div>
  </div>
</div>

Note: The pinwheel requires this SVG in your HTML:

Required SVG 
<svg width="0" height="0" style="position:absolute">
  <defs>
    <clipPath id="spinnerBlade" clipPathUnits="objectBoundingBox">
      <path d="M 0.5,0.5 Q 0.6025,0.2720 0.3372,0.0272 A 0.5,0.5 0 0 1 0.6628,0.0272 Q 0.7211,0.3834 0.5,0.5 Z" />
    </clipPath>
  </defs>
</svg>

Slider

Horizontal
Disabled
Pointer Thumb
With Tick Marks
Discrete (Snaps)
Vertical
Vertical Pointer
Vertical + Ticks
Discrete (Snaps)
Disabled
Show code 
<div>
  <div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start;">
    <div>
      <span class="label">Horizontal</span><br>
      <div class="aqua-slider-custom">
        <div class="track"></div>
        <div class="thumb" style="left: 50%;"><div class="shimmer"></div></div>
      </div>
    </div>

    <div>
      <span class="label">Disabled</span><br>
      <div class="aqua-slider-custom disabled">
        <div class="track"></div>
        <div class="thumb" style="left: 50%;"><div class="shimmer"></div></div>
      </div>
    </div>

    <div>
      <span class="label">Pointer Thumb</span><br>
      <div class="aqua-slider-custom alternative-thumb">
        <div class="track"></div>
        <div class="thumb" style="left: 50%;"><div class="shimmer"></div></div>
      </div>
    </div>

    <div>
      <span class="label">With Tick Marks</span><br>
      <div class="aqua-slider-custom alternative-thumb show-ticks">
        <div class="track"></div>
        <div class="thumb" style="left: 50%;"><div class="shimmer"></div></div>
        <div class="ticks">
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
        </div>
      </div>
    </div>

    <div>
      <span class="label">Discrete (Snaps)</span><br>
      <div class="aqua-slider-custom alternative-thumb show-ticks discrete">
        <div class="track"></div>
        <div class="thumb" style="left: 50%;"><div class="shimmer"></div></div>
        <div class="ticks">
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
        </div>
      </div>
    </div>
  </div>

  <div style="display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; margin-top: 30px;">
    <div style="height: 180px;">
      <span class="label">Vertical</span><br>
      <div class="aqua-slider-custom vertical" style="margin-top: 10px;">
        <div class="track"></div>
        <div class="thumb" style="top: 40%;"><div class="shimmer"></div></div>
      </div>
    </div>

    <div style="height: 180px;">
      <span class="label">Vertical Pointer</span><br>
      <div class="aqua-slider-custom vertical alternative-thumb" style="margin-top: 10px;">
        <div class="track"></div>
        <div class="thumb" style="top: 40%;"><div class="shimmer"></div></div>
      </div>
    </div>

    <div style="height: 180px;">
      <span class="label">Vertical + Ticks</span><br>
      <div class="aqua-slider-custom vertical alternative-thumb show-ticks" style="margin-top: 10px;">
        <div class="track"></div>
        <div class="thumb" style="top: 50%;"><div class="shimmer"></div></div>
        <div class="ticks">
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
        </div>
      </div>
    </div>

    <div style="height: 180px;">
      <span class="label">Discrete (Snaps)</span><br>
      <div class="aqua-slider-custom vertical alternative-thumb show-ticks discrete" style="margin-top: 10px;">
        <div class="track"></div>
        <div class="thumb" style="top: 50%;"><div class="shimmer"></div></div>
        <div class="ticks">
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
        </div>
      </div>
    </div>

    <div style="height: 180px;">
      <span class="label">Disabled</span><br>
      <div class="aqua-slider-custom vertical alternative-thumb disabled" style="margin-top: 10px;">
        <div class="track"></div>
        <div class="thumb" style="top: 50%;"><div class="shimmer"></div></div>
      </div>
    </div>
  </div>
</div>

Search Field

Rounded search input with magnifying glass icon.

Show code 
<input type="search" class="search-field" placeholder="Search..." style="width: 200px;">

Stepper

Number input with increment/decrement buttons.

Stepper
Show code 
<div>
  <span class="label">Stepper</span><br>
  <div class="aqua-spinner">
    <input type="number" value="5" min="0" max="100" aria-label="Value">
    <div class="aqua-spinner-buttons" aria-hidden="true">
      <button type="button">&#9650;</button>
      <button type="button">&#9660;</button>
    </div>
  </div>
</div>

Separator

Item 1
Item 2
Item 3
Show code 
<hr class="aqua-separator">
<div style="display: flex; align-items: center;">
  <span>Item 1</span>
  <div class="aqua-separator vertical"></div>
  <span>Item 2</span>
  <div class="aqua-separator vertical"></div>
  <span>Item 3</span>
</div>

Matches JavaFX Hyperlink - underlines on hover/focus

Button as Link
Show code 
<div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: baseline;">
  <div>
    <span class="label">Normal</span><br>
    <a href="#" class="aqua-hyperlink">Click this hyperlink</a>
  </div>
  <div>
    <span class="label">Visited</span><br>
    <a href="#visited-example" class="aqua-hyperlink" id="visited-example">Visited hyperlink</a>
  </div>
  <div>
    <span class="label">Disabled</span><br>
    <a href="#" class="aqua-hyperlink disabled">Disabled hyperlink</a>
  </div>
  <div>
    <span class="label">Button as Link</span><br>
    <button class="aqua-hyperlink">Button styled as link</button>
  </div>
</div>

Tabs

Classic Mac OS X Aqua-style tabs with glossy gradients and liquid blue separator bar. Inactive tabs are slightly pushed down, active tab is flush with the bar.

Pill-Style Tabs (Segmented)

Compact segmented tabs for inline controls and preferences.

General settings content goes here.

Show code 
<div class="aqua-tabs-container">
  <div class="aqua-tabs">
    <button class="aqua-tab active" data-tab="general">General</button>
    <button class="aqua-tab" data-tab="security">Security</button>
    <button class="aqua-tab" data-tab="privacy">Privacy</button>
  </div>
  <div class="aqua-tab-content" data-tab-content>
    <p>General settings content goes here.</p>
  </div>
</div>

Segmented Tabs

Folder-style tabs used for inline controls and preferences in earlier Mac OS X versions.

General settings content goes here.

Fieldset

Settings
Show code 
<fieldset>
  <legend>Settings</legend>
  <div class="field-row">
    <input type="checkbox" id="fs-check1" checked>
    <label for="fs-check1">Option 1</label>
  </div>
  <div class="field-row">
    <input type="checkbox" id="fs-check2">
    <label for="fs-check2">Option 2</label>
  </div>
</fieldset>

Alert Dialog

Modal alert boxes with different icon types.

Are you sure you want to remove the items in the Trash permanently?

You cannot undo this action.

Are you sure you want to delete this file?

This action cannot be undone. The file will be permanently removed.

Show code 
<!-- Pre-10.6 era alert dialog -->
<div class="era-pre-10-6">
  <div class="window" style="width: 490px;">
    <div class="title-bar">
      <div class="title-bar-text"></div>
    </div>
    <div class="window-body">
      <div class="alert-dialog-content">
        <div class="alert-dialog-icon finder"></div>
        <div class="alert-dialog-text">
          <h3>Are you sure you want to remove the items in the Trash permanently?</h3>
          <p>You cannot undo this action.</p>
        </div>
      </div>
      <div class="alert-dialog-buttons">
        <button class="aqua-button aqua-button--secondary"><span>Cancel</span></button>
        <button class="aqua-button default"><span>OK</span></button>
      </div>
    </div>
  </div>
</div>

<!-- 10.6+ era alert dialog -->
<div class="era-10-6-plus">
  <div class="window" style="width: 420px;">
    <div class="title-bar">
      <div class="title-bar-text"></div>
    </div>
    <div class="window-body">
      <div class="alert-dialog-content">
        <div class="alert-dialog-icon finder"></div>
        <div class="alert-dialog-text">
          <h3>Are you sure you want to delete this file?</h3>
          <p>This action cannot be undone. The file will be permanently removed.</p>
        </div>
      </div>
      <div class="alert-dialog-buttons">
        <button>Cancel</button>
        <button class="default">Delete</button>
      </div>
    </div>
  </div>
</div>

Titled Pane / Accordion

General Options

Content for general options goes here.

Advanced Options

Content for advanced options goes here.

Show code 
<div class="aqua-titled-pane expanded">
  <div class="aqua-titled-pane-header" role="button" tabindex="0">
    <span class="aqua-titled-pane-arrow"></span>
    <span>General Options</span>
  </div>
  <div class="aqua-titled-pane-content">
    <p style="margin: 5px 0;">Content for general options goes here.</p>
  </div>
</div>
<div class="aqua-titled-pane">
  <div class="aqua-titled-pane-header" role="button" tabindex="0">
    <span class="aqua-titled-pane-arrow"></span>
    <span>Advanced Options</span>
  </div>
  <div class="aqua-titled-pane-content">
    <p style="margin: 5px 0;">Content for advanced options goes here.</p>
  </div>
</div>

Split Pane

Drag the divider to resize panes

Horizontal (Left / Right)
Left pane
Right pane
Vertical (Top / Bottom)
Top pane
Bottom pane
Show code 
<div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start;">
  <div>
    <span class="label">Horizontal (Left / Right)</span><br>
    <div class="aqua-split-pane" style="height: 100px; width: 300px;" id="split-h">
      <div style="width: 150px; padding: 10px;">Left pane</div>
      <div class="aqua-split-divider" data-split="split-h" aria-label="Resize panes" role="separator" aria-orientation="vertical" tabindex="0">
        <div class="aqua-split-grabber"></div>
        <div class="aqua-split-grabber"></div>
        <div class="aqua-split-grabber"></div>
      </div>
      <div style="flex: 1; padding: 10px;">Right pane</div>
    </div>
  </div>
  <div>
    <span class="label">Vertical (Top / Bottom)</span><br>
    <div class="aqua-split-pane vertical" style="height: 150px; width: 200px;" id="split-v">
      <div style="height: 75px; padding: 10px;">Top pane</div>
      <div class="aqua-split-divider" data-split="split-v" aria-label="Resize panes" role="separator" aria-orientation="horizontal" tabindex="0">
        <div class="aqua-split-grabber"></div>
        <div class="aqua-split-grabber"></div>
        <div class="aqua-split-grabber"></div>
      </div>
      <div style="flex: 1; padding: 10px;">Bottom pane</div>
    </div>
  </div>
</div>

Split View

Sidebar and content area layout.

Inbox
Sent
Drafts
Trash

Select a folder to view messages.

Show code 
<div class="split-view" style="height: 200px;">
  <div class="split-view-sidebar" style="padding: 8px;">
    <div style="padding: 4px; background: #2B99FF; color: white; border-radius: 3px;">Inbox</div>
    <div style="padding: 4px;">Sent</div>
    <div style="padding: 4px;">Drafts</div>
    <div style="padding: 4px;">Trash</div>
  </div>
  <div class="split-view-content">
    <p>Select a folder to view messages.</p>
  </div>
</div>

Disclosure

Expandable section with disclosure triangle.

Advanced Options
Show code 
<details class="disclosure" style="width: 300px;">
  <summary>Advanced Options</summary>
  <div class="disclosure-content">
    <div class="field-row">
      <input type="checkbox" id="disc-check1">
      <label for="disc-check1">Enable logging</label>
    </div>
    <div class="field-row">
      <input type="checkbox" id="disc-check2">
      <label for="disc-check2">Debug mode</label>
    </div>
  </div>
</details>

Scrollbar

Unified Aqua Scrollbar Components with Wave Thumbs - Available in horizontal and vertical variants with together or split arrow modes.

Orientation
Arrow Mode
Show code 
<div class="scrollbar horizontal" id="scrollbar-h-together">
  <div class="scrollbar-cap aqua-glass-h"></div>
  <div class="scrollbar-track">
    <div class="scrollbar-thumb-h">
      <div class="scrollbar-wave-ink-h">
        <div class="scrollbar-wave-shimmer-h"></div>
      </div>
    </div>
  </div>
  <div class="scrollbar-buttons aqua-glass-h">
    <button type="button" title="Scroll left">&#9664;</button>
    <button type="button" title="Scroll right">&#9654;</button>
  </div>
</div>

Overlay Scrollbar

Modern Mac-style overlay scrollbar - hover over the container to see the scrollbar appear

Vertical Scroll
Scrollable Content
Line 1 - Hover to see scrollbar
Line 2 - Semi-transparent thumb
Line 3 - Uses CSS variables
Line 4 - 4px border radius
Line 5 - Expands to 6px on hover
Line 6 - Track appears on hover
Line 7 - Light gradient background
Line 8 - No arrow buttons
Line 9 - Modern macOS style
Line 10 - Overlay scrollbar
Line 11 - Doesn't take space
Line 12 - Content flows under
Line 13 - Try scrolling!
Line 14 - Smooth animation
Line 15 - End of content
Show code 
<div>
  <span class="label">Vertical Scroll</span><br>
  <div class="scroll-container scroll-demo-vertical">
    <div style="padding: 12px;">
      <div style="font-weight: bold; margin-bottom: 8px;">Scrollable Content</div>
      <div style="margin: 0 0 6px 0;">Line 1 - Hover to see scrollbar</div>
      <div style="margin: 0 0 6px 0;">Line 2 - Semi-transparent thumb</div>
      <div style="margin: 0 0 6px 0;">Line 3 - Uses CSS variables</div>
      <div style="margin: 0 0 6px 0;">Line 4 - 4px border radius</div>
      <div style="margin: 0 0 6px 0;">Line 5 - Expands to 6px on hover</div>
      <div style="margin: 0 0 6px 0;">Line 6 - Track appears on hover</div>
      <div style="margin: 0 0 6px 0;">Line 7 - Light gradient background</div>
      <div style="margin: 0 0 6px 0;">Line 8 - No arrow buttons</div>
      <div style="margin: 0 0 6px 0;">Line 9 - Modern macOS style</div>
      <div style="margin: 0 0 6px 0;">Line 10 - Overlay scrollbar</div>
      <div style="margin: 0 0 6px 0;">Line 11 - Doesn't take space</div>
      <div style="margin: 0 0 6px 0;">Line 12 - Content flows under</div>
      <div style="margin: 0 0 6px 0;">Line 13 - Try scrolling!</div>
      <div style="margin: 0 0 6px 0;">Line 14 - Smooth animation</div>
      <div style="margin: 0;">Line 15 - End of content</div>
    </div>
  </div>
</div>

Classic Mac menu bar with dropdown menus.

Show code 
<nav class="menu-bar">
  <ul>
    <li>
      <span class="menu-title">File</span>
      <ul class="menu-dropdown">
        <li>New <span class="shortcut">Cmd+N</span></li>
        <li>Open... <span class="shortcut">Cmd+O</span></li>
        <li class="separator"></li>
        <li>Save <span class="shortcut">Cmd+S</span></li>
        <li class="disabled">Save As...</li>
      </ul>
    </li>
    <li>
      <span class="menu-title">Edit</span>
      <ul class="menu-dropdown">
        <li>Undo <span class="shortcut">Cmd+Z</span></li>
        <li>Redo <span class="shortcut">Cmd+Shift+Z</span></li>
        <li class="separator"></li>
        <li>Cut <span class="shortcut">Cmd+X</span></li>
        <li>Copy <span class="shortcut">Cmd+C</span></li>
        <li>Paste <span class="shortcut">Cmd+V</span></li>
      </ul>
    </li>
    <li>
      <span class="menu-title">View</span>
      <ul class="menu-dropdown">
        <li>as Icons</li>
        <li>as List</li>
        <li>as Columns</li>
      </ul>
    </li>
  </ul>
</nav>

Dock

The Mac OS X application dock with icon launcher and running indicators.

Finder Finder
Mail Mail
Safari Safari
iTunes iTunes
Downloads Downloads
Trash Trash
Show code 
<div class="dock">
  <div class="dock-icon running">
    <img src="icon/finder.svg" alt="Finder">
    <span class="dock-label">Finder</span>
  </div>
  <div class="dock-icon">
    <img src="icon/finder.svg" alt="Mail">
    <span class="dock-label">Mail</span>
  </div>
  <div class="dock-icon running">
    <img src="icon/finder.svg" alt="Safari">
    <span class="dock-label">Safari</span>
  </div>
  <div class="dock-icon">
    <img src="icon/finder.svg" alt="iTunes">
    <span class="dock-label">iTunes</span>
  </div>
  <div class="dock-separator"></div>
  <div class="dock-icon">
    <img src="icon/finder.svg" alt="Downloads">
    <span class="dock-label">Downloads</span>
  </div>
  <div class="dock-icon">
    <img src="icon/finder.svg" alt="Trash">
    <span class="dock-label">Trash</span>
  </div>
</div>

Small Dock

Finder
Mail
Trash
Show code 
<div class="dock small">
  <div class="dock-icon running">
    <img src="icon/finder.svg" alt="Finder">
  </div>
  <div class="dock-icon">
    <img src="icon/finder.svg" alt="Mail">
  </div>
  <div class="dock-separator"></div>
  <div class="dock-icon">
    <img src="icon/finder.svg" alt="Trash">
  </div>
</div>

Large Dock

Finder
Mail
Trash
Show code 
<div class="dock large">
  <div class="dock-icon running">
    <img src="icon/finder.svg" alt="Finder">
  </div>
  <div class="dock-icon">
    <img src="icon/finder.svg" alt="Mail">
  </div>
  <div class="dock-separator"></div>
  <div class="dock-icon">
    <img src="icon/finder.svg" alt="Trash">
  </div>
</div>

Context Menu

Menu styling for right-click and contextual actions.

Cut ⌘X
Copy ⌘C
Paste ⌘V
Select All ⌘A
Show code 
<div class="aqua-menu" style="display: inline-block;">
  <div class="aqua-menu-item"><span>Cut</span> <span class="shortcut">&#8984;X</span></div>
  <div class="aqua-menu-item"><span>Copy</span> <span class="shortcut">&#8984;C</span></div>
  <div class="aqua-menu-item"><span>Paste</span> <span class="shortcut">&#8984;V</span></div>
  <div class="aqua-menu-separator"></div>
  <div class="aqua-menu-item"><span>Select All</span> <span class="shortcut">&#8984;A</span></div>
</div>

Toolbar

Icon toolbar for application actions.

Show code 
<div class="toolbar">
  <button class="toolbar-button">
    <span>Back</span>
  </button>
  <button class="toolbar-button">
    <span>Forward</span>
  </button>
  <div class="toolbar-separator"></div>
  <button class="toolbar-button">
    <span>Refresh</span>
  </button>
  <button class="toolbar-button" disabled>
    <span>Stop</span>
  </button>
</div>

Segmented Control

Button group for switching between views or options.

Show code 
<div class="segmented-control">
  <button class="active">Icons</button>
  <button>List</button>
  <button>Columns</button>
</div>

Pagination

Show code 
<div class="aqua-pagination">
  <button class="aqua-pagination-arrow">&lt;</button>
  <button class="aqua-pagination-btn">1</button>
  <button class="aqua-pagination-btn active">2</button>
  <button class="aqua-pagination-btn">3</button>
  <button class="aqua-pagination-btn">4</button>
  <button class="aqua-pagination-btn">5</button>
  <button class="aqua-pagination-arrow">&gt;</button>
</div>

Table View

Alternating row colors: --table-row-odd and --table-row-even

Name Date Modified Size Kind
Documents Dec 10, 2024 -- Folder
report.pdf Dec 9, 2024 2.4 MB PDF Document
image.png Dec 8, 2024 856 KB PNG Image
Show code 
<table class="aqua-table unified-header" style="width: 100%; max-width: 700px;">
  <thead>
    <tr>
      <th class="active" data-sort-dir="asc" style="width: 200px;">Name <span class="sort-arrow asc"></span></th>
      <th>Date Modified</th>
      <th>Size</th>
      <th>Kind</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Documents</td>
      <td>Dec 10, 2024</td>
      <td>--</td>
      <td>Folder</td>
    </tr>
    <tr>
      <td>report.pdf</td>
      <td>Dec 9, 2024</td>
      <td>2.4 MB</td>
      <td>PDF Document</td>
    </tr>
    <tr>
      <td>image.png</td>
      <td>Dec 8, 2024</td>
      <td>856 KB</td>
      <td>PNG Image</td>
    </tr>
  </tbody>
</table>
Name Date Modified Size Kind
Documents Dec 10, 2024 -- Folder
report.pdf Dec 9, 2024 2.4 MB PDF Document
image.png Dec 8, 2024 856 KB PNG Image
Show code 
<table class="aqua-table" style="width: 100%; max-width: 600px;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Date Modified</th>
      <th>Size</th>
      <th>Kind</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Documents</td>
      <td>Dec 10, 2024</td>
      <td>--</td>
      <td>Folder</td>
    </tr>
    <tr>
      <td>report.pdf</td>
      <td>Dec 9, 2024</td>
      <td>2.4 MB</td>
      <td>PDF Document</td>
    </tr>
    <tr>
      <td>image.png</td>
      <td>Dec 8, 2024</td>
      <td>856 KB</td>
      <td>PNG Image</td>
    </tr>
  </tbody>
</table>

List View

Selectable list component with focused (blue) and unfocused (gray) selection.

Vertical (Focused - Blue)
Document 1
Document 2
Document 3
Document 4
Document 5
Vertical (Unfocused - Gray)
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Striped Rows
Row 1
Row 2
Row 3
Row 4
Row 5
Disabled
Item A
Item B
Item C
Horizontal List
January
February
March
April
May
June
July
Show code 
<div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start;">
  <div>
    <span class="label">Vertical (Focused - Blue)</span><br>
    <div class="aqua-list focused" tabindex="0" style="width: 150px;">
      <div class="aqua-list-item">Document 1</div>
      <div class="aqua-list-item selected">Document 2</div>
      <div class="aqua-list-item">Document 3</div>
      <div class="aqua-list-item">Document 4</div>
      <div class="aqua-list-item">Document 5</div>
    </div>
  </div>

  <div>
    <span class="label">Vertical (Unfocused - Gray)</span><br>
    <div class="aqua-list" style="width: 150px;">
      <div class="aqua-list-item">Photo 1</div>
      <div class="aqua-list-item selected">Photo 2</div>
      <div class="aqua-list-item">Photo 3</div>
      <div class="aqua-list-item">Photo 4</div>
      <div class="aqua-list-item">Photo 5</div>
    </div>
  </div>

  <div>
    <span class="label">Striped Rows</span><br>
    <div class="aqua-list striped focused" tabindex="0" style="width: 150px;">
      <div class="aqua-list-item">Row 1</div>
      <div class="aqua-list-item">Row 2</div>
      <div class="aqua-list-item selected">Row 3</div>
      <div class="aqua-list-item">Row 4</div>
      <div class="aqua-list-item">Row 5</div>
    </div>
  </div>

  <div>
    <span class="label">Disabled</span><br>
    <div class="aqua-list disabled" style="width: 150px;">
      <div class="aqua-list-item">Item A</div>
      <div class="aqua-list-item selected">Item B</div>
      <div class="aqua-list-item">Item C</div>
    </div>
  </div>
</div>

<div style="margin-top: 20px;">
  <span class="label">Horizontal List</span><br>
  <div class="aqua-list horizontal focused" tabindex="0" style="width: 520px;">
    <div class="aqua-list-item">January</div>
    <div class="aqua-list-item selected">February</div>
    <div class="aqua-list-item">March</div>
    <div class="aqua-list-item">April</div>
    <div class="aqua-list-item">May</div>
    <div class="aqua-list-item">June</div>
    <div class="aqua-list-item">July</div>
  </div>
</div>

Tree View

Expandable hierarchical list.

Documents
report.pdf
notes.txt
Pictures
Show code 
<div class="aqua-tree" tabindex="0" style="width: 250px;">
  <div class="aqua-tree-item expanded">
    <span class="aqua-tree-arrow"></span>
    <span>Documents</span>
  </div>
  <div class="aqua-tree-item" style="padding-left: 20px;">
    <span style="width: 8px; display: inline-block;"></span>
    <span>report.pdf</span>
  </div>
  <div class="aqua-tree-item" style="padding-left: 20px;">
    <span style="width: 8px; display: inline-block;"></span>
    <span>notes.txt</span>
  </div>
  <div class="aqua-tree-item selected">
    <span class="aqua-tree-arrow"></span>
    <span>Pictures</span>
  </div>
</div>

Tree Table View

Combines tree hierarchy with table columns (click arrows to expand/collapse)

Name Date Modified Size Kind
Documents
Dec 10, 2024 -- Folder
report.pdf
Dec 9, 2024 2.4 MB PDF Document
notes.txt
Dec 8, 2024 12 KB Text File
Pictures
Dec 7, 2024 -- Folder
photo.jpg
Dec 6, 2024 3.2 MB JPEG Image
Show code 
<table class="aqua-tree-table unified-header" tabindex="0" id="tree-table-demo" data-tree-table style="width: 100%; max-width: 700px;">
  <thead>
    <tr>
      <th class="active" data-sort-dir="asc" style="width: 200px;">Name <span class="sort-arrow asc"></span></th>
      <th>Date Modified</th>
      <th>Size</th>
      <th>Kind</th>
    </tr>
  </thead>
  <tbody>
    <tr class="selected" data-id="documents">
      <td>
        <div class="aqua-tree-cell">
          <span class="aqua-tree-table-arrow expanded" data-toggle="documents" role="button" tabindex="0" aria-label="Toggle Documents"></span>
          <span>Documents</span>
        </div>
      </td>
      <td>Dec 10, 2024</td>
      <td>--</td>
      <td>Folder</td>
    </tr>
    <tr data-parent="documents">
      <td>
        <div class="aqua-tree-cell">
          <span class="aqua-tree-table-indent"></span>
          <span class="aqua-tree-table-arrow leaf"></span>
          <span>report.pdf</span>
        </div>
      </td>
      <td>Dec 9, 2024</td>
      <td>2.4 MB</td>
      <td>PDF Document</td>
    </tr>
    <tr data-parent="documents">
      <td>
        <div class="aqua-tree-cell">
          <span class="aqua-tree-table-indent"></span>
          <span class="aqua-tree-table-arrow leaf"></span>
          <span>notes.txt</span>
        </div>
      </td>
      <td>Dec 8, 2024</td>
      <td>12 KB</td>
      <td>Text File</td>
    </tr>
    <tr data-id="pictures">
      <td>
        <div class="aqua-tree-cell">
          <span class="aqua-tree-table-arrow" data-toggle="pictures" role="button" tabindex="0" aria-label="Toggle Pictures"></span>
          <span>Pictures</span>
        </div>
      </td>
      <td>Dec 7, 2024</td>
      <td>--</td>
      <td>Folder</td>
    </tr>
    <tr data-parent="pictures" style="display: none;">
      <td>
        <div class="aqua-tree-cell">
          <span class="aqua-tree-table-indent"></span>
          <span class="aqua-tree-table-arrow leaf"></span>
          <span>photo.jpg</span>
        </div>
      </td>
      <td>Dec 6, 2024</td>
      <td>3.2 MB</td>
      <td>JPEG Image</td>
    </tr>
  </tbody>
</table>

Tooltip

Background: --tooltip-bg

This is a tooltip!
Show code 
<div class="aqua-tooltip">
  <button>Hover for tooltip</button>
  <span class="tooltip-text">This is a tooltip!</span>
</div>

Balloon / Speech Bubble

Tooltip with a speech bubble tail. Use .balloon-bottom, .balloon-right, etc. for positioning.

This is a balloon tooltip with the tail pointing up.
Tail pointing down.
Show code 
<div style="display: flex; gap: 20px; flex-wrap: wrap; padding-top: 20px;">
  <div class="balloon" style="max-width: 200px;">
    This is a balloon tooltip with the tail pointing up.
  </div>
  <div class="balloon balloon-bottom" style="max-width: 200px; margin-top: 0; margin-bottom: 20px;">
    Tail pointing down.
  </div>
</div>

Badge

Messages 5 Notifications 99+
Show code 
<div style="display: flex; gap: 20px; align-items: center; flex-wrap: wrap;">
  <span>Messages</span>
  <span class="aqua-badge">5</span>
  <span style="margin-left: 20px;">Notifications</span>
  <span class="aqua-badge">99+</span>
</div>

Color Swatches

Show code 
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
  <div class="aqua-color-swatch" style="background: #FF5F57;"></div>
  <div class="aqua-color-swatch" style="background: #FFBD2E;"></div>
  <div class="aqua-color-swatch" style="background: #28CA41;"></div>
  <div class="aqua-color-swatch" style="background: #2B99FF;"></div>
  <div class="aqua-color-swatch" style="background: #5856D6;"></div>
</div>

Focus Ring (Aqua Blue Glow)

Focus colors: $focus-outer, $focus-inner

Button
Text field
Select
Button
Text field
Select
Show code 
<!-- Pre-10.6 era focus ring -->
<div class="era-pre-10-6">
  <div style="display: flex; gap: 30px; align-items: center; flex-wrap: wrap;">
    <div>
      <span class="label">Button</span><br>
      <button class="aqua-button aqua-button--secondary aqua-focus-ring is-focused"><span>Button</span></button>
    </div>
    <div>
      <span class="label">Text field</span><br>
      <input class="aqua-textfield aqua-focus-ring is-focused" type="text" value="Focused">
    </div>
    <div>
      <span class="label">Select</span><br>
      <select class="aqua-focus-ring is-focused">
        <option>Option 1</option>
        <option selected>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
  </div>
</div>

<!-- 10.6+ era focus ring -->
<div class="era-10-6-plus">
  <div style="display: flex; gap: 30px; align-items: center; flex-wrap: wrap;">
    <div>
      <span class="label">Button</span><br>
      <button class="aqua-focus-ring is-focused">Button</button>
    </div>
    <div>
      <span class="label">Text field</span><br>
      <input class="aqua-textfield aqua-focus-ring is-focused" type="text" value="Focused">
    </div>
    <div>
      <span class="label">Select</span><br>
      <select class="aqua-focus-ring is-focused">
        <option>Option 1</option>
        <option selected>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
  </div>
</div>

Stripes & Pinstripes

The horizontal stripes (pinstripes) were a signature visual element of Mac OS X from 10.0 through 10.3. Apple phased them out with Mac OS X 10.4 Tiger, moving toward cleaner, stripe-free interfaces.

Era Availability

Era Stripes Notes
10.0-10.1 (Cheetah/Puma) Yes Prominent blue-tinted stripes throughout the UI
10.2 (Jaguar) Yes Stripes with slightly cooler blue tint
10.3 (Panther) Yes Neutral gray stripes, more subtle
10.4 (Tiger) No Stripes phased out, cleaner UI
10.6 (Snow Leopard) No Continued stripe-free design

Classic Horizontal Stripes

The signature horizontal stripe pattern used in early Finder windows and dialogs. Use the .aqua-background-striped class or apply --aqua-background-classic directly.

This container uses the classic horizontal stripe pattern from Mac OS X 10.0-10.3.

Show code 
<div class="aqua-background-striped" style="padding: 20px; border-radius: 5px; border: 1px solid #ccc;">
<p style="margin: 0;">This container uses the classic horizontal stripe pattern from Mac OS X 10.0-10.3.</p>
</div>

Pinstripe Variants

Two pinstripe patterns are available:

Window Pinstripe
--aqua-window-pinstripe
Menu Pinstripe
--aqua-menu-pinstripe

Pinstripes were phased out in 10.4+. Switch to 10.0-10.3 to view the classic patterns. You can still opt in with .aqua-background-striped or --aqua-background-classic.

Color Themes

Add a theme class to your container to change the accent color. Available themes:

  • theme-graphite - Gray/silver (like macOS Graphite appearance)
  • theme-air - Light/white (subtle, airy look)
  • theme-earth - Green (nature-inspired)
  • theme-fire - Red/orange (bold, fiery)

Theme Selector

Select a theme to preview different color schemes on the components below

▲ ▼
Buttons
Checkboxes & Radio
Wave Progress Bar
Segmented Control
List Selection
Item 1
Item 2
Item 3
▲ ▼
Buttons
Checkboxes & Radio
Wave Progress Bar
Segmented Control
List Selection
Item 1
Item 2
Item 3
Show code 
<!-- Pre-10.6 era theme selector -->
<div class="era-pre-10-6">
  <div id="theme-preview-pre106">
    <div class="field-row" style="margin-bottom: 20px;">
      <label for="theme-select-pre106">Theme:</label>
      <div class="select-wrapper">
        <select id="theme-select-pre106" onchange="setTheme(this.value)">
          <option value="">Default (Aqua Blue)</option>
          <option value="theme-graphite">Graphite</option>
          <option value="theme-air">Air (Light)</option>
          <option value="theme-earth">Earth (Green)</option>
          <option value="theme-fire">Fire (Red)</option>
          <option value="theme-purple">Purple</option>
        </select>
        <span class="select-button"></span>
        <span class="select-arrows">
          <span class="arrow-up">&#9650;</span>
          <span class="arrow-down">&#9660;</span>
        </span>
      </div>
    </div>

    <div class="label">Buttons</div>
    <div class="button-row">
      <button class="aqua-button aqua-button--secondary"><span>Regular</span></button>
      <button class="aqua-button default"><span>Default</span></button>
    </div>

    <div class="label" style="margin-top: 15px;">Checkboxes & Radio</div>
    <div class="field-row">
      <input type="checkbox" id="theme-check1-pre106" checked>
      <label for="theme-check1-pre106">Checked checkbox</label>
    </div>
    <div class="field-row">
      <input type="radio" id="theme-radio1-pre106" name="theme-radio-pre106" checked>
      <label for="theme-radio1-pre106">Selected radio</label>
    </div>

    <div class="label" style="margin-top: 15px;">Wave Progress Bar</div>
    <div class="progress-wave" style="--p: 60; width: 200px;">
      <div class="progress-wave__fill">
        <div class="progress-wave__ink" aria-hidden="true">
          <span class="progress-wave__shimmer"></span>
        </div>
      </div>
    </div>

    <div class="label" style="margin-top: 15px;">Segmented Control</div>
    <div class="segmented-control">
      <button class="aqua-button aqua-button--secondary active"><span>Selected</span></button>
      <button class="aqua-button aqua-button--secondary"><span>Option</span></button>
      <button class="aqua-button aqua-button--secondary"><span>Option</span></button>
    </div>

    <div class="label" style="margin-top: 15px;">List Selection</div>
    <div class="aqua-list focused" tabindex="0" style="width: 150px;">
      <div class="aqua-list-item">Item 1</div>
      <div class="aqua-list-item selected">Item 2</div>
      <div class="aqua-list-item">Item 3</div>
    </div>
  </div>
</div>

<!-- 10.6+ era theme selector -->
<div class="era-10-6-plus">
  <div id="theme-preview">
    <div class="field-row" style="margin-bottom: 20px;">
      <label for="theme-select">Theme:</label>
      <div class="select-wrapper">
        <select id="theme-select" onchange="setTheme(this.value)">
          <option value="">Default (Aqua Blue)</option>
          <option value="theme-graphite">Graphite</option>
          <option value="theme-air">Air (Light)</option>
          <option value="theme-earth">Earth (Green)</option>
          <option value="theme-fire">Fire (Red)</option>
          <option value="theme-purple">Purple</option>
        </select>
        <span class="select-button"></span>
        <span class="select-arrows">
          <span class="arrow-up">&#9650;</span>
          <span class="arrow-down">&#9660;</span>
        </span>
      </div>
    </div>

    <div class="label">Buttons</div>
    <div class="button-row">
      <button>Regular</button>
      <button class="default">Default</button>
    </div>

    <div class="label" style="margin-top: 15px;">Checkboxes & Radio</div>
    <div class="field-row">
      <input type="checkbox" id="theme-check1" checked>
      <label for="theme-check1">Checked checkbox</label>
    </div>
    <div class="field-row">
      <input type="radio" id="theme-radio1" name="theme-radio" checked>
      <label for="theme-radio1">Selected radio</label>
    </div>

    <div class="label" style="margin-top: 15px;">Wave Progress Bar</div>
    <div class="progress-wave" style="--p: 60; width: 200px;">
      <div class="progress-wave__fill">
        <div class="progress-wave__ink" aria-hidden="true">
          <span class="progress-wave__shimmer"></span>
        </div>
      </div>
    </div>

    <div class="label" style="margin-top: 15px;">Segmented Control</div>
    <div class="segmented-control">
      <button class="active">Selected</button>
      <button>Option</button>
      <button>Option</button>
    </div>

    <div class="label" style="margin-top: 15px;">List Selection</div>
    <div class="aqua-list focused" tabindex="0" style="width: 150px;">
      <div class="aqua-list-item">Item 1</div>
      <div class="aqua-list-item selected">Item 2</div>
      <div class="aqua-list-item">Item 3</div>
    </div>
  </div>
</div>

Complete Example

A window demonstrating multiple components together:

×
−
+
Preferences
Display
×
−
+
Preferences
Display
Show code 
<!-- Pre-10.6 era complete example -->
<div class="era-pre-10-6">
  <div class="window" style="max-width: 350px;">
    <div class="title-bar">
      <div class="traffic-lights traffic-lights--always-colored">
        <div class="aqua-light aqua-red" role="button" tabindex="0" aria-label="Close"><span class="icon">×</span></div>
        <div class="aqua-light aqua-yellow" role="button" tabindex="0" aria-label="Minimize"><span class="icon">−</span></div>
        <div class="aqua-light aqua-green" role="button" tabindex="0" aria-label="Maximize"><span class="icon">+</span></div>
      </div>
      <div class="title-bar-text">Preferences</div>
    </div>
    <div class="window-body">
      <div class="field-row-stacked">
        <label for="username-pre106">Username:</label>
        <input type="text" id="username-pre106" value="admin">
      </div>
      <fieldset style="margin-top: 12px;">
        <legend>Display</legend>
        <div class="field-row">
          <input type="radio" id="light-pre106" name="theme-pre106" checked>
          <label for="light-pre106">Light mode</label>
        </div>
        <div class="field-row">
          <input type="radio" id="dark-pre106" name="theme-pre106">
          <label for="dark-pre106">Dark mode</label>
        </div>
      </fieldset>
      <div class="field-row" style="margin-top: 16px; justify-content: flex-end;">
        <button class="aqua-button aqua-button--secondary"><span>Cancel</span></button>
        <button class="aqua-button default"><span>Save</span></button>
      </div>
    </div>
  </div>
</div>

<!-- 10.6+ era complete example -->
<div class="era-10-6-plus">
  <div class="window" style="max-width: 350px;">
    <div class="title-bar">
      <div class="traffic-lights traffic-lights--always-colored">
        <div class="aqua-light aqua-red" role="button" tabindex="0" aria-label="Close"><span class="icon">×</span></div>
        <div class="aqua-light aqua-yellow" role="button" tabindex="0" aria-label="Minimize"><span class="icon">−</span></div>
        <div class="aqua-light aqua-green" role="button" tabindex="0" aria-label="Maximize"><span class="icon">+</span></div>
      </div>
      <div class="title-bar-text">Preferences</div>
    </div>
    <div class="window-body">
      <div class="field-row-stacked">
        <label for="username">Username:</label>
        <input type="text" id="username" value="admin">
      </div>
      <fieldset style="margin-top: 12px;">
        <legend>Display</legend>
        <div class="field-row">
          <input type="radio" id="light" name="theme" checked>
          <label for="light">Light mode</label>
        </div>
        <div class="field-row">
          <input type="radio" id="dark" name="theme">
          <label for="dark">Dark mode</label>
        </div>
      </fieldset>
      <div class="field-row" style="margin-top: 16px; justify-content: flex-end;">
        <button>Cancel</button>
        <button class="default">Save</button>
      </div>
    </div>
  </div>
</div>