@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.

60 components react shadcn-cli

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://glasscn-components.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://glasscn-components.vercel.app/r/registry.json

bun bunx shadcn@latest add https://glasscn-components.vercel.app/r/registry.json

fetch registry curl -s https://glasscn-components.vercel.app/r/registry.json

Components

60 total

Utils lib

npx shadcn@latest add https://glasscn-components.vercel.app/r/utils.json

Highlight Text 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 ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/button.json

Badge ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/badge.json

Avatar ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/avatar.json

Checkbox ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/checkbox.json

Input ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/input.json

Textarea ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/textarea.json

Input Group ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/input-group.json

Item ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/item.json

Combobox ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/combobox.json

Command ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/command.json

Dropdown Menu ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/dropdown-menu.json

Select ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/select.json

Switch ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/switch.json

Progress ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/progress.json

Glass Button 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 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 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 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 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 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 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 ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/card.json

Liquid Glass 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 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 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 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 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 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 ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/calendar.json

Glass Calendar 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 lib

npx shadcn@latest add https://glasscn-components.vercel.app/r/glass-variants.json

Wavy Border 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 ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/sheet.json

Separator ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/separator.json

Skeleton ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/skeleton.json

Button Group ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/button-group.json

Popover ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/popover.json

Radio Group ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/radio-group.json

Tooltip ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/tooltip.json

Sidebar ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/sidebar.json

Glass Separator 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 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 ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/alert.json

Alert Dialog ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/alert-dialog.json

Dialog ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/dialog.json

Glass Alert 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 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 ui

npx shadcn@latest add https://glasscn-components.vercel.app/r/code-block-command.json

Glass Code Block Command 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 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 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 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 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 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 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 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 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 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