# glasscn By **kostyniuk** ยท Software & Tools Open-source glassmorphism component library for shadcn/ui, 21 Apple-inspired glass UI components for Next.js and React, installed via the shadcn registry. - Source: https://glasscn-components.vercel.app - Repository: https://github.com/kostyniuk/glasscn-components - Tags: open-source, ui-components, glassmorphism, shadcn, react, nextjs, tailwind, design-system - Pricing: free - Upvotes: 0 ## Features - 21 glassmorphism components covering buttons, cards, sidebars, calendars, forms, and more - 5 glass surface variants: clear, frosted, subtle, liquid, liquid-refract - shadcn registry install, one command, automatic dependency resolution - Source-ownership model: code lives in your codebase, not a locked package - Pure CSS liquid variant with multi-layer bevel, sheen, and ambient drift - SVG displacement filter liquid-refract variant for lens-like curved glass effect - Theme-aware variants compatible with shadcn/ui theming system - MIT licensed, open source --- ## Why it matters Glassmorphism is easy to sketch and painful to implement consistently across a full component set. glasscn solves this by shipping 21 production-ready glass components that plug directly into the shadcn/ui workflow most React developers already use, so there is no new mental model to absorb. ## The big picture glasscn is an Apple-inspired component library built on top of shadcn/ui and Base UI. Per the README, components land in your codebase via the shadcn registry, no npm package, no version lock, no black box. You edit, theme, and fork the source as your own. Version 0.4.0 shipped in 2026. ## How it works Install any component with a single command using the `@glasscn/` registry prefix (for example, `npx shadcn add @glasscn/glass-button`). Dependencies, including other registry items, resolve automatically. Then import the component and pass a `glassVariant` prop to choose your surface treatment. ## Zoom in The five glass variants span a wide tonal range. `clear` applies a light backdrop blur and a hairline border. `frosted` runs a heavy 16px blur that diffuses content behind it like physical frosted glass. `subtle` adds a whisper-thin tint for nested panels. `liquid` is pure CSS, combining multi-layer bevel, sheen, and a slow ambient drift with a warm glow. `liquid-refract` goes furthest, using an SVG displacement filter to produce real lens-like refraction, the closest thing in CSS to actual curved glass. ## Yes, but Because components live in your codebase rather than a versioned package, keeping up with upstream improvements requires manual effort. There is no automatic update path short of reinstalling components or diffing changes from the GitHub repo. ## The bottom line glasscn is the fastest way to add a coherent, Apple-quality glass aesthetic to a shadcn/ui project. The registry-first model gives you full ownership of the code from day one, which is the right tradeoff for any team that plans to customize heavily. ## FAQ ### What is 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. ### How do I install glasscn components? 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. ### Is glasscn free and open source? 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. ### What is glasscn best for? 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. ### How does glasscn compare to other glassmorphism or component libraries? 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. ### What are the limitations or risks of using glasscn? 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. --- [View on Analog](https://analoghq.ai/kostyniuk/software-tools/glasscn)