# Liquid Glass

> React component library for Apple-style liquid glass and blur effects.

Liquid Glass is a React UI library that recreates Apple's dynamic translucent glass materials and refraction effects across modern web browsers and Electron. It provides prebuilt components for surfaces, toolbars, menus, controls, and progressive blur that work over light and dark backgrounds.

Website: https://liquid-glass.glassapp.dev/

Also at: https://github.com/Glass-HQ/liquid-glass

## What it is for

- Replicate visionOS or macOS translucent glass aesthetics in web applications
- Build floating toolbars, navigation bars, and context menus with backdrop refraction
- Add progressive blur fades to scrolling lists or media player interfaces

## Features

- Prebuilt glass components including Surface, Toolbar, Tab Bar, Menu, Slider, and Switch
- Progressive blur and refraction shader effects
- Clear and Regular material options with light and dark mode support
- Cross-browser compatibility across Chromium, Safari, Firefox, and Electron
- Interactive documentation and component sandbox

## Pricing

Open source

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: React frontend developers and UI designers building modern web and desktop apps.
- Tags: react, css, ui components, glassmorphism, blur, web design

## Why it was saved

- [@naaiyy_, 8 October 2026](https://x.com/naaiyy_/status/2107985803301281882): Brings the Liquid Glass look to any browser — Chromium, Safari, Firefox, Electron — with installable components and live example demos.
- [@naaiyy_, 8 October 2026](https://x.com/naaiyy_/status/2107985803301281882): Live previews of every glass component with install & usage code, in light and dark themes.

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 11 October 2026. Page: https://xiry.app/resources/liquid-glass

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.