glasscn

glasscn is an open-source glassmorphism component library built on top of shadcn/ui and Base UI, targeting Next.js and React projects. It ships 21 glass-styled UI primitives, including buttons, cards, sidebars, calendars, inputs, and more, each available in five distinct glass surface variants. The library is MIT licensed and was at v0.4.0 as of 2026.

Install any component with a single shadcn registry command using the @glasscn/ prefix, for example: `npx shadcn add @glasscn/glass-button`. Dependencies, including other registry items the component relies on, resolve and install automatically. After installation, the source lands directly in your codebase under your components directory, you import it from there and pass a `glassVariant` prop to select a surface treatment.

Yes, glasscn is fully open source and MIT licensed, with source code available on GitHub at kostyniuk/glasscn-components. There are no paid tiers or commercial licenses mentioned in the available documentation. Because components install into your own codebase via the shadcn registry rather than as a versioned npm package, there is no ongoing subscription or package dependency to manage.

glasscn is best for React and Next.js developers who already work with shadcn/ui and want to add a coherent, Apple-quality glass aesthetic across a full UI without hand-rolling every component. It is especially useful for premium dashboards, SaaS landing pages, and design-forward applications where glassmorphism is a deliberate design choice rather than an afterthought. The five glass variants give designers fine-grained control from subtle depth cues to full liquid refraction.

Unlike CSS snippet collections or standalone glassmorphism generators, glasscn integrates directly with the shadcn/ui registry workflow, so components come with automatic dependency resolution and theme-aware variants out of the box. The registry-first model means you own the source code rather than pulling from a versioned npm package, giving you more control but also more responsibility for keeping up with upstream changes. The liquid-refract variant, which uses an SVG displacement filter for real lens-like refraction, is a differentiator not commonly found in other React component libraries.

Because glasscn uses the shadcn registry model, there is no automatic update path, if the upstream library ships fixes or new variants, you need to manually merge or reinstall affected components. The `liquid-refract` variant relies on SVG displacement filters, which may have inconsistent rendering across browsers. The library is at v0.4.0, which signals it is still maturing and the API surface could change between versions.