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/

For example:

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

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

Available components

Glass components

Component	Install
Glass Alert	npx shadcn add @glasscn/glass-alert
Glass Alert Dialog	npx shadcn add @glasscn/glass-alert-dialog
Glass Badge	npx shadcn add @glasscn/glass-badge
Glass Button	npx shadcn add @glasscn/glass-button
Glass Button Group	npx shadcn add @glasscn/glass-button-group
Glass Calendar	npx shadcn add @glasscn/glass-calendar
Glass Card	npx shadcn add @glasscn/glass-card
Glass Checkbox	npx shadcn add @glasscn/glass-checkbox
Glass Code Block Command	npx shadcn add @glasscn/glass-code-block-command
Glass Command	npx shadcn add @glasscn/glass-command
Glass Combobox	npx shadcn add @glasscn/glass-combobox
Glass Input	npx shadcn add @glasscn/glass-input
Glass Item	npx shadcn add @glasscn/glass-item
Glass Popover	npx shadcn add @glasscn/glass-popover
Glass Radio Group	npx shadcn add @glasscn/glass-radio-group
Glass Select	npx shadcn add @glasscn/glass-select
Glass Separator	npx shadcn add @glasscn/glass-separator
Glass Sidebar	npx shadcn add @glasscn/glass-sidebar
Glass Skeleton	npx shadcn add @glasscn/glass-skeleton

Utilities

Item	Install
Glass Variants	npx shadcn add @glasscn/glass-variants
Utils	npx shadcn add @glasscn/utils

Usage

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

import { GlassButton } from "@/components/ui/glasscn/glass-button"

export default function Page() {
  return (
    
      Clear Glass
      Frosted Glass
      Subtle Glass
      Liquid Glass
      Liquid Refract
    
  )
}

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.