glasscn

A glassmorphism component library built on top of shadcn/ui. All components are available via the shadcn registry and can be dropped into any Next.js / React project.

Links

Homepage: https://glasscn.vercel.app

Installation

Install any component directly by name using the @glasscn/ registry prefix:

npx shadcn add @glasscn/<component-name>

For example:

npx shadcn add @glasscn/glass-code-block-command

Dependencies (including other registry items) are resolved and installed automatically.

Available components

Glass components

Utilities

Usage

After installing a component, import it from your components directory:

import { GlassButton } from "@/components/ui/glasscn/glass-button"
export default function Page() {  return (    <div>      <GlassButton>Clear Glass</GlassButton>      <GlassButton glassVariant="frosted">Frosted Glass</GlassButton>      <GlassButton glassVariant="subtle">Subtle Glass</GlassButton>      <GlassButton glassVariant="liquid">Liquid Glass</GlassButton>      <GlassButton glassVariant="liquid-refract">Liquid Refract</GlassButton>    </div>  )}

Liquid variants

• liquid — pure CSS. Heavy saturation + sheen + multi-layer bevel. Zero setup.
• liquid-refract — SVG displacement filter. Real lens-like refraction with curved glass effect.