Glass Panel ​

A macOS Liquid Glass surface (NSGlassEffectView) for custom controls and media overlays.

Use regular when content needs stronger blur and luminosity control. Use clear over media-rich backgrounds where preserving backdrop detail is more important.

The base panel keeps its CSS material fallback. Add data-macvue-glass="on" to an ancestor to enable edge refraction; the nearest data-macvue-glass boundary wins, so a nested off disables refraction locally. Reduced transparency uses an opaque surface, and forced colors uses system colors. See the Liquid Glass guide for the opt-in boundary, fallbacks and prior art.

<script setup lang="ts">
import { MacGlassPanel } from 'macvue'
</script>

<template>
  <div data-macvue-glass="on">
    <MacGlassPanel material="regular">
      Regular
    </MacGlassPanel>
    <MacGlassPanel material="clear">
      Clear
    </MacGlassPanel>
  </div>
</template>

Usage ​

<script setup lang="ts">
import { MacGlassPanel } from 'macvue'
</script>

<template>
  <div data-macvue-glass="on">
    <MacGlassPanel material="clear">
      Media controls
    </MacGlassPanel>
  </div>
</template>

API ​

Props ​

Slots ​