# Liquid Glass for the Web

> Apple-inspired liquid glass components for React and Next.js by Zaki Sheriff, published by The Atom. The npm package is @zakisheriff/liquid-glass (version 4.0.0). Open source under the MIT license, ≈31 KB of JavaScript and ≈5.5 KB of CSS gzipped, with no runtime dependencies.

Install with `npm i @zakisheriff/liquid-glass` and import `@zakisheriff/liquid-glass/styles.css` once. Components: GlassButton, GlassSwitch, GlassNav, GlassMenu, GlassSegmented, GlassSlider, GlassInput, GlassCard, GlassSheet. This is an independent web UI library, not an Apple product. Chromium refracts the live backdrop with SVG displacement; Safari and Firefox use translucent material and magnified live copies inside lenses. React and React DOM 17 or later are required.

## Documentation

- [Full documentation for language models](https://liquidglass.theatom.lk/llms-full.txt): Everything in one plain-text file: install, components, props, theming, performance, browser support and answers.
- [Documentation in Markdown](https://liquidglass.theatom.lk/docs.md): The guide as Markdown.
- [Readable documentation](https://liquidglass.theatom.lk/docs): The same guide in HTML.
- [Interactive component demo](https://liquidglass.theatom.lk/): Try buttons, switches, tab bars, segmented controls, sliders, search, menus and sheets.

## Source and package

- [Repository README](https://raw.githubusercontent.com/zakisheriff/Liquid-Glass/main/README.md): Usage examples and the full props reference.
- [npm package](https://www.npmjs.com/package/@zakisheriff/liquid-glass): Published versions and installation.
- [Source code](https://github.com/zakisheriff/Liquid-Glass): Implementation, license and third-party notices.

## Optional

- [Author](https://github.com/zakisheriff): Zaki Sheriff.
- [Publisher](https://theatom.lk): The Atom.