All 36 components

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Button Group

button-group

@base-ui/react, class-variance-authority1 file

Code Block Command

code-block-command

lucide-react, motion5 files

Glass Alert

glass-alert

Glass Alert with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Alert Dialog

glass-alert-dialog

Glass Alert Dialog with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Badge

glass-badge

Glass Badge with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Button

glass-button

Glass Button with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file1 example

Glass Button Group

glass-button-group

Glass Button Group with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Calendar

glass-calendar

Glass Calendar with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Card

glass-card

Glass Card with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Checkbox

glass-checkbox

Glass Checkbox with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Code Block Command

glass-code-block-command

Glass Code Block Command with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Combobox

glass-combobox

Glass Combobox with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Command

glass-command

Glass Command with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Contact Pill

glass-contact-pill

Liquid-glass contact chip with an avatar (image or initials fallback) and name, for messaging apps

lucide-react1 file

Glass Dropdown Menu

glass-dropdown-menu

Glass Dropdown Menu with five variants: clear, frosted, subtle, liquid, and liquid-refract

@base-ui/react1 file

Glass Icon

glass-icon

A circular glass chip that wraps any icon, iOS-control-center style. Preset sizes scale the circle and icon together so grids of icons stay uniform.

class-variance-authority1 file

Glass Input

glass-input

Glass Input with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Item

glass-item

Glass Item with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Popover

glass-popover

Glass Popover with five variants: clear, frosted, subtle, liquid, and liquid-refract

@base-ui/react1 file

Glass Progress

glass-progress

Glass Progress with five variants: clear, frosted, subtle, liquid, and liquid-refract

@base-ui/react1 file

Glass Radio Group

glass-radio-group

Glass Radio Group with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Scrim Card

glass-scrim-card

Siri-style liquid-refract card with a black scrim that eases from one edge into clear glass

utils1 file

Glass Select

glass-select

Glass Select with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Separator

glass-separator

Glass Separator with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Sidebar

glass-sidebar

Glass Sidebar with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Skeleton

glass-skeleton

Glass Skeleton with five variants: clear, frosted, subtle, liquid, and liquid-refract

utils, glass-variants1 file

Glass Toggle Group

glass-toggle-group

A segmented control with a sliding glass puck indicator supporting icons, text, or any React content.

motion1 file

Highlight Text

highlight-textOn 21st

Inline text highlight with preset color variants and custom background class support.

utils1 file

Open

Input Group

input-group

class-variance-authority1 file

Item

@base-ui/react, class-variance-authority1 file

Liquid Badge

liquid-badge

A liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border.

@paper-design/shaders-react, class-variance-authority1 file

Liquid Glass

liquid-glass

Low-level refractive glass wrapper used by liquid-refract components.

utils1 file

Liquid Switch

liquid-switch

A liquid-glass switch wrapper built on top of the default switch component.

@paper-design/shaders-react, class-variance-authority1 file

Liquid Text

liquid-textOn 21st

Animated text filled with a liquid shader mask.

@paper-design/shaders-react1 file

Open

Liquid Watch

liquid-watch

Compact watch-style stacked time display built from liquid text inspired by Apple Watch.

utils1 file

Preference

A weighted preference bar with icon badges, hover tinting, and tooltip descriptions.

utils1 file

From the glasscn readme

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.

glasscn contents

About glasscn

All 36 components

Button Group

Code Block Command

Glass Alert

Glass Alert Dialog

Glass Badge

Glass Button

Glass Button Group

Glass Calendar

Glass Card

Glass Checkbox

Glass Code Block Command

Glass Combobox

Glass Command

Glass Contact Pill

Glass Dropdown Menu

Glass Icon

Glass Input

Glass Item

Glass Popover

Glass Progress

Glass Radio Group

Glass Scrim Card

Glass Select

Glass Separator

Glass Sidebar

Glass Skeleton

Glass Toggle Group

Highlight Text

Input Group

Item

Liquid Badge

Liquid Glass

Liquid Switch

Liquid Text

Liquid Watch

Preference

From the glasscn readme

glasscn

Links

Installation

Available components

Glass components

Utilities

Usage

Liquid variants

What glasscn builds on

Hooks and utilities

Registries like glasscn