Liquid Glass UI Kit: 11 React Components for shadcn/ui
The glass of iOS 26 and macOS 26 for your web app: eleven React components as shadcn/ui registry items you add with one command. The tab bar with its sliding lens, the toolbar, the sheet, the card, buttons, tabs, a segmented control, a switch and a slider whose thumbs turn to glass as you hold them, and toasts, all on one Glass surface you can use for your own. The backdrop is blurred and bent at the rim by an SVG displacement map drawn for each element, its colours split where it bends; Safari and Firefox get frosted glass, and reduced transparency an opaque one. Light and dark, Tailwind CSS 4, React 19, TypeScript, and the demo app the pictures come from.
$8
One payment. The files are yours to download right away.
- Instant downloadIn your account the moment the payment goes through, with the receipt by email.
- Personal and commercial useOne license for one person, in your own work and your clients'. The files themselves are not shared or resold.
- Includes
- 11 React components
- Formats
- shadcn registry items (.json), React and TypeScript source (.tsx)
- Download
- 55 files in one zip, 0.2 MB
- Works with
- React 19, Tailwind CSS 4, shadcn/ui, light and dark
- Category
- UI Kits
- Released
- 21 Oct 2026
- License
- Personal and commercial use
GlassButtonCardSheetTab barToolbarTabsSegmented controlSwitchSliderToast
Where to use it
Web apps
Bars, sheets and controls of glass, at home beside iOS 26 and macOS 26 on the same screen.
Over pictures
Photo, map and media apps, where the content runs under the bars and the glass bends it at the rim.
Dashboards and widgets
Cards, toolbars and toasts that float over a backdrop, in light and dark.
Your own version
The source lands in your project: the glass, its bend and every class are yours to change.
More in UI Kits