DEV Community

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

Posted on

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 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

Top comments (0)