Introduction
Apple Liquid Glass components for React — 22 components, shadcn registry, zero runtime dependencies.
website-glass is a family of Apple Liquid Glass components for React, installed as source you own via the shadcn CLI.
It is built on a cross-browser lens engine: an SVG feDisplacementMap filter refracts live DOM content (text stays selectable, links stay clickable), and the components layer iOS-style interactions on top — spring physics, gel presses, rubber-band overdrag.
Components
| Component | Description |
|---|---|
glass | Core lens engine + GlassSurface frosted panel + animation utilities |
glass-button | Icon disc or text capsule with gel press animation |
glass-switch | iOS toggle — thumb lifts into a glass lens on press |
glass-slider | Range slider — handle turns into a refracting lens while dragging |
glass-tabs | Tab list with spring-driven glass indicator |
glass-tooltip | Frosted capsule that scales in from its anchor |
glass-input | Search capsule with glowing focus ring |
glass-popover | Frosted context menu with hairline separators |
glass-dialog | Modal glass panel that scales into place |
glass-dock | macOS-style dock with proximity magnification |
glass-tile | Cheap selectable glass grid cell (scales to hundreds) |
glass-swatch | Glass-edged colour swatch for palette pickers |
glass-card | Frosted card surface with header/content/footer parts |
glass-checkbox | Glass checkbox with accent fill + checkmark |
glass-radio | Glass radio group with accent dot |
glass-toggle-group | Segmented control with sliding indicator |
glass-accordion | Collapsible sections with smooth height transition |
glass-dropdown-menu | Portaled dropdown menu with keyboard nav |
glass-select | Frosted select with a portaled listbox |
glass-sheet | Drawer that slides in from any edge |
glass-toast | Singleton toast system + viewport |
glass-command | ⌘K command palette with live filtering |
Install
Every component depends on the glass base. It installs automatically:
npx shadcn@latest add https://websiteglass.com/r/glass.jsonInstall individual components:
npx shadcn@latest add https://websiteglass.com/r/glass-button.json
npx shadcn@latest add https://websiteglass.com/r/glass-switch.json
npx shadcn@latest add https://websiteglass.com/r/glass-slider.json
npx shadcn@latest add https://websiteglass.com/r/glass-tabs.jsonRequirements
- React 18 or 19
- Tailwind CSS v4
clsx+tailwind-merge(standard shadcn setup)