glass-ui: Apple Liquid Glass-style Components for Next.js with shadcn-ui

glass-ui: A modern glassmorphic component library inspired by Apple’s Liquid Glass design, built with Next.js, React, and the shadcn-ui registry.

Key features:

✨ 40+ components with glass variants

🎨 CSS variable theming for global or per-component c…


This content originally appeared on DEV Community and was authored by jQueryScript

glass-ui: A modern glassmorphic component library inspired by Apple's Liquid Glass design, built with Next.js, React, and the shadcn-ui registry.

Key features:

✨ 40+ components with glass variants

🎨 CSS variable theming for global or per-component customization

🌓 Light/dark mode support with automatic adjustments

⚡ TypeScript definitions and Radix UI accessibility

🎭 Glow, shimmer, and ripple animation effects

📦 Install components individually with pnpm, yarn, npm, or bun

You get backdrop blur, adjustable transparency, and Apple-style glass styling without writing custom CSS. Change blur intensity and opacity through CSS variables or component props.

Built on top of shadcn-ui so it integrates with existing projects. Each component arrives fully typed and accessible.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo


This content originally appeared on DEV Community and was authored by jQueryScript


Print Share Comment Cite Upload Translate Updates
APA

jQueryScript | Sciencx (2025-11-18T02:37:41+00:00) glass-ui: Apple Liquid Glass-style Components for Next.js with shadcn-ui. Retrieved from https://www.scien.cx/2025/11/18/glass-ui-apple-liquid-glass-style-components-for-next-js-with-shadcn-ui/

MLA
" » glass-ui: Apple Liquid Glass-style Components for Next.js with shadcn-ui." jQueryScript | Sciencx - Tuesday November 18, 2025, https://www.scien.cx/2025/11/18/glass-ui-apple-liquid-glass-style-components-for-next-js-with-shadcn-ui/
HARVARD
jQueryScript | Sciencx Tuesday November 18, 2025 » glass-ui: Apple Liquid Glass-style Components for Next.js with shadcn-ui., viewed ,<https://www.scien.cx/2025/11/18/glass-ui-apple-liquid-glass-style-components-for-next-js-with-shadcn-ui/>
VANCOUVER
jQueryScript | Sciencx - » glass-ui: Apple Liquid Glass-style Components for Next.js with shadcn-ui. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/11/18/glass-ui-apple-liquid-glass-style-components-for-next-js-with-shadcn-ui/
CHICAGO
" » glass-ui: Apple Liquid Glass-style Components for Next.js with shadcn-ui." jQueryScript | Sciencx - Accessed . https://www.scien.cx/2025/11/18/glass-ui-apple-liquid-glass-style-components-for-next-js-with-shadcn-ui/
IEEE
" » glass-ui: Apple Liquid Glass-style Components for Next.js with shadcn-ui." jQueryScript | Sciencx [Online]. Available: https://www.scien.cx/2025/11/18/glass-ui-apple-liquid-glass-style-components-for-next-js-with-shadcn-ui/. [Accessed: ]
rf:citation
» glass-ui: Apple Liquid Glass-style Components for Next.js with shadcn-ui | jQueryScript | Sciencx | https://www.scien.cx/2025/11/18/glass-ui-apple-liquid-glass-style-components-for-next-js-with-shadcn-ui/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.