Introduction

website-glass brings the Apple Liquid Glass aesthetic to React as a shadcn-compatible registry component.

The Glass component uses a canvas-generated SVG feDisplacementMap filter to produce real lens-refraction on the DOM — the rim physically bends background pixels, text inside stays sharp and selectable. A WebGL shader serves as fallback when SVG filters are unavailable.

Install

Add the component directly from the registry with npx shadcn:

npx shadcn@latest add https://websiteglass.com/r/glass.json

Or register the namespace once and install by name:

npx shadcn@latest add --registry https://websiteglass.com/r/registry.json glass

Requirements

• React 18 or 19
• Next.js 14 or 15 (or any React bundler — the component has no Next.js dependency)
• Tailwind CSS v3 or v4
• clsx + tailwind-merge (standard shadcn utilities — already in your project if you use shadcn)