---
name: "@glasscn"
slug: "glasscn"
description: "A glassmorphism component library layered on shadcn/ui, offering ~20 glass-variant primitives (Glass Alert, Alert Dialog, Badge, Button, Button Group, Calendar, Card, Checkbox, Code Block Command, Command, Combobox, Input, Item, Popover, Radio Group, Select, Separator, Sidebar, Skeleton) plus Glass Variants utility and liquid-glass button variants (clear, frosted, subtle, liquid, liquid-refract via SVG displacement). Installable via npx shadcn add @glasscn/<component>. Free and open-source for Next.js/React. Use for: applying a consistent translucent glass aesthetic to a subset of shadcn UI controls with minimal friction."
category: "Theming/styling"
tags: ["accessibility", "aesthetic", "blocks", "buttons", "cards", "dashboard", "design-system", "developer-tools", "forms", "glassmorphism", "hooks", "icons", "loaders", "media", "navigation", "overlays"]
framework: "react"
license: null
author: "kostyniuk"
website: "https://glasscn-components.vercel.app/"
github: "https://github.com/kostyniuk/glasscn-components"
registry: "https://glasscn-components.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 58
component_count: 65
generated_at: "2026-07-28T08:59:05.895Z"
---

# @glasscn

A glassmorphism component library layered on shadcn/ui, offering ~20 glass-variant primitives (Glass Alert, Alert Dialog, Badge, Button, Button Group, Calendar, Card, Checkbox, Code Block Command, Command, Combobox, Input, Item, Popover, Radio Group, Select, Separator, Sidebar, Skeleton) plus Glass Variants utility and liquid-glass button variants (clear, frosted, subtle, liquid, liquid-refract via SVG displacement). Installable via npx shadcn add @glasscn/<component>. Free and open-source for Next.js/React. Use for: applying a consistent translucent glass aesthetic to a subset of shadcn UI controls with minimal friction.

## Links

- Website: https://glasscn-components.vercel.app/
- GitHub: https://github.com/kostyniuk/glasscn-components
- Registry JSON: https://glasscn-components.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/glasscn
- This file: https://sh4dcn.vercel.app/md/glasscn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://glasscn-components.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://glasscn-components.vercel.app/r/registry.json
bunx shadcn@latest add https://glasscn-components.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/kostyniuk/glasscn-components.git
# fetch the raw registry index
curl -s https://glasscn-components.vercel.app/r/registry.json
```

## Components (65)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | Utils | `npx shadcn@latest add https://glasscn-components.vercel.app/r/utils.json` |
| highlight-text | registry:component | Inline text highlight with preset color variants and custom background class support. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/highlight-text.json` |
| button | registry:ui | Button | `npx shadcn@latest add https://glasscn-components.vercel.app/r/button.json` |
| badge | registry:ui | Badge | `npx shadcn@latest add https://glasscn-components.vercel.app/r/badge.json` |
| avatar | registry:ui | Avatar | `npx shadcn@latest add https://glasscn-components.vercel.app/r/avatar.json` |
| checkbox | registry:ui | Checkbox | `npx shadcn@latest add https://glasscn-components.vercel.app/r/checkbox.json` |
| input | registry:ui | Input | `npx shadcn@latest add https://glasscn-components.vercel.app/r/input.json` |
| textarea | registry:ui | Textarea | `npx shadcn@latest add https://glasscn-components.vercel.app/r/textarea.json` |
| input-group | registry:ui | Input Group | `npx shadcn@latest add https://glasscn-components.vercel.app/r/input-group.json` |
| item | registry:ui | Item | `npx shadcn@latest add https://glasscn-components.vercel.app/r/item.json` |
| combobox | registry:ui | Combobox | `npx shadcn@latest add https://glasscn-components.vercel.app/r/combobox.json` |
| command | registry:ui | Command | `npx shadcn@latest add https://glasscn-components.vercel.app/r/command.json` |
| dropdown-menu | registry:ui | Dropdown Menu | `npx shadcn@latest add https://glasscn-components.vercel.app/r/dropdown-menu.json` |
| select | registry:ui | Select | `npx shadcn@latest add https://glasscn-components.vercel.app/r/select.json` |
| switch | registry:ui | Switch | `npx shadcn@latest add https://glasscn-components.vercel.app/r/switch.json` |
| progress | registry:ui | Progress | `npx shadcn@latest add https://glasscn-components.vercel.app/r/progress.json` |
| glass-button | registry:component | Glass Button with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-button.json` |
| glass-badge | registry:component | Glass Badge with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-badge.json` |
| glass-checkbox | registry:component | Glass Checkbox with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-checkbox.json` |
| glass-command | registry:component | Glass Command with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-command.json` |
| glass-dropdown-menu | registry:component | Glass Dropdown Menu with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-dropdown-menu.json` |
| glass-combobox | registry:component | Glass Combobox with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-combobox.json` |
| glass-select | registry:component | Glass Select with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-select.json` |
| card | registry:ui | Card | `npx shadcn@latest add https://glasscn-components.vercel.app/r/card.json` |
| liquid-glass | registry:component | Low-level refractive glass wrapper used by liquid-refract components. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/liquid-glass.json` |
| glass-card | registry:component | Glass Card with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-card.json` |
| glass-scrim-card | registry:component | Siri-style liquid-refract card with a black scrim that eases from one edge into clear glass | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-scrim-card.json` |
| glance | registry:item | CSS-only hover shine. Add the glance class to any element and a diagonal highlight sweeps across it once per hover | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glance.json` |
| glass-contact-pill | registry:component | Liquid-glass contact chip with an avatar (image or initials fallback) and name, for messaging apps | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-contact-pill.json` |
| glass-icon | registry:component | 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. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-icon.json` |
| calendar | registry:ui | Calendar | `npx shadcn@latest add https://glasscn-components.vercel.app/r/calendar.json` |
| glass-calendar | registry:component | Glass Calendar with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-calendar.json` |
| glass-variants | registry:lib | Glass Variants | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-variants.json` |
| wavy-border | registry:style | A global CSS class that applies a small, even wavy border shape. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/wavy-border.json` |
| sheet | registry:ui | Sheet | `npx shadcn@latest add https://glasscn-components.vercel.app/r/sheet.json` |
| separator | registry:ui | Separator | `npx shadcn@latest add https://glasscn-components.vercel.app/r/separator.json` |
| skeleton | registry:ui | Skeleton | `npx shadcn@latest add https://glasscn-components.vercel.app/r/skeleton.json` |
| button-group | registry:ui | Button Group | `npx shadcn@latest add https://glasscn-components.vercel.app/r/button-group.json` |
| popover | registry:ui | Popover | `npx shadcn@latest add https://glasscn-components.vercel.app/r/popover.json` |
| radio-group | registry:ui | Radio Group | `npx shadcn@latest add https://glasscn-components.vercel.app/r/radio-group.json` |
| tooltip | registry:ui | Tooltip | `npx shadcn@latest add https://glasscn-components.vercel.app/r/tooltip.json` |
| sidebar | registry:ui | Sidebar | `npx shadcn@latest add https://glasscn-components.vercel.app/r/sidebar.json` |
| glass-separator | registry:component | Glass Separator with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-separator.json` |
| glass-sidebar | registry:component | Glass Sidebar with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-sidebar.json` |
| alert | registry:ui | Alert | `npx shadcn@latest add https://glasscn-components.vercel.app/r/alert.json` |
| alert-dialog | registry:ui | Alert Dialog | `npx shadcn@latest add https://glasscn-components.vercel.app/r/alert-dialog.json` |
| dialog | registry:ui | Dialog | `npx shadcn@latest add https://glasscn-components.vercel.app/r/dialog.json` |
| glass-alert | registry:component | Glass Alert with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-alert.json` |
| glass-alert-dialog | registry:component | Glass Alert Dialog with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-alert-dialog.json` |
| code-block-command | registry:ui | Code Block Command | `npx shadcn@latest add https://glasscn-components.vercel.app/r/code-block-command.json` |
| glass-code-block-command | registry:component | Glass Code Block Command with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-code-block-command.json` |
| component-preview | registry:component | A preview shell for component demos with switchable default and glass variants. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/component-preview.json` |
| glass-button-group | registry:component | Glass Button Group with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-button-group.json` |
| glass-toggle-group | registry:component | A segmented control with a sliding glass puck indicator supporting icons, text, or any React content. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-toggle-group.json` |
| glass-input | registry:component | Glass Input with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-input.json` |
| glass-item | registry:component | Glass Item with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-item.json` |
| glass-popover | registry:component | Glass Popover with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-popover.json` |
| glass-progress | registry:component | Glass Progress with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-progress.json` |
| glass-radio-group | registry:component | Glass Radio Group with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-radio-group.json` |
| glass-skeleton | registry:component | Glass Skeleton with five variants: clear, frosted, subtle, liquid, and liquid-refract | `npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-skeleton.json` |
| liquid-text | registry:component | Animated text filled with a liquid shader mask. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/liquid-text.json` |
| liquid-watch | registry:component | Compact watch-style stacked time display built from liquid text inspired by Apple Watch. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/liquid-watch.json` |
| liquid-switch | registry:component | A liquid-glass switch wrapper built on top of the default switch component. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/liquid-switch.json` |
| liquid-badge | registry:component | A liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/liquid-badge.json` |
| preference | registry:component | A weighted preference bar with icon badges, hover tinting, and tooltip descriptions. | `npx shadcn@latest add https://glasscn-components.vercel.app/r/preference.json` |

## For AI agents

```text
You are adding components from @glasscn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/glasscn.md) for the component list.
2. Fetch the machine-readable index: https://glasscn-components.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: glasscn).
```