---
name: "@glassyui"
slug: "glassyui"
description: "Glassy UI for React and Next.js: 37 glass components, a CSS glass theme, and drop-in component sets."
category: "Forms"
tags: ["buttons", "forms", "glassmorphism", "icons", "loaders", "media", "navigation", "overlays", "pro-available", "theming"]
framework: "react"
license: "MIT"
author: "alexburlis"
website: "https://glassyui.com"
github: "https://github.com/alexburlis/glassyui"
registry: "https://glassyui.com/r/registry.json"
pro: true
pro_url: "https://pro.glassyui.com/"
github_stars: 111
component_count: 41
generated_at: "2026-10-27T06:34:08.542Z"
---

# @glassyui

Glassy UI for React and Next.js: 37 glass components, a CSS glass theme, and drop-in component sets.

## Links

- Website: https://glassyui.com
- GitHub: https://github.com/alexburlis/glassyui
- Registry JSON: https://glassyui.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/glassyui
- This file: https://sh4dcn.netlify.app/md/glassyui.md
- Pro / pricing: https://pro.glassyui.com/

## Install

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

## Components (41)

| name | type | description | install |
| --- | --- | --- | --- |
| glass-provider | registry:ui | Sets the theme and accessibility preferences that every Glassy UI component follows. | `npx shadcn@latest add https://glassyui.com/r/glass-provider.json` |
| glass-surface | registry:ui | The glass material as a plain div, for building your own glass components. | `npx shadcn@latest add https://glassyui.com/r/glass-surface.json` |
| glass-button | registry:ui | A glass button with four variants, three sizes and an asChild mode for links. | `npx shadcn@latest add https://glassyui.com/r/glass-button.json` |
| glass-panel | registry:ui | A glass container in a panel, card or pill shape. | `npx shadcn@latest add https://glassyui.com/r/glass-panel.json` |
| glass-header | registry:ui | A floating glass header with a brand, navigation links, actions and a compact menu. | `npx shadcn@latest add https://glassyui.com/r/glass-header.json` |
| glass-input | registry:ui | A recessed glass text field with an optional label and hint. | `npx shadcn@latest add https://glassyui.com/r/glass-input.json` |
| glass-checkbox | registry:ui | A glass checkbox with an optional label, description and indeterminate state. | `npx shadcn@latest add https://glassyui.com/r/glass-checkbox.json` |
| glass-radio-group | registry:ui | A group of glass radio buttons where exactly one option is chosen. | `npx shadcn@latest add https://glassyui.com/r/glass-radio-group.json` |
| glass-textarea | registry:ui | A recessed glass text area that can grow with its text. | `npx shadcn@latest add https://glassyui.com/r/glass-textarea.json` |
| glass-select | registry:ui | A select field whose options open on a raised glass panel. | `npx shadcn@latest add https://glassyui.com/r/glass-select.json` |
| glass-tabs | registry:ui | Tabs on a glass pill, with one indicator that moves to the selected tab. | `npx shadcn@latest add https://glassyui.com/r/glass-tabs.json` |
| glass-dialog | registry:ui | A modal glass dialog with an overlay, a focus trap and a close button. | `npx shadcn@latest add https://glassyui.com/r/glass-dialog.json` |
| glass-popover | registry:ui | A glass popover anchored to the control that opens it. | `npx shadcn@latest add https://glassyui.com/r/glass-popover.json` |
| glass-tooltip | registry:ui | A small glass label that appears on hover and keyboard focus. | `npx shadcn@latest add https://glassyui.com/r/glass-tooltip.json` |
| glass-toast | registry:ui | A glass notification for brief updates that screen readers announce. | `npx shadcn@latest add https://glassyui.com/r/glass-toast.json` |
| glass-accordion | registry:ui | Collapsible glass sections that open one at a time or several at once. | `npx shadcn@latest add https://glassyui.com/r/glass-accordion.json` |
| glass-switch | registry:ui | A glass on/off switch in two sizes. | `npx shadcn@latest add https://glassyui.com/r/glass-switch.json` |
| glass-slider | registry:ui | A glass slider for one value or a range, with one named thumb per value. | `npx shadcn@latest add https://glassyui.com/r/glass-slider.json` |
| glass-segmented-control | registry:ui | A single-choice glass control for two to six options, with a draggable selection. | `npx shadcn@latest add https://glassyui.com/r/glass-segmented-control.json` |
| glass-badge | registry:ui | A small tinted glass label for status, counts and categories. | `npx shadcn@latest add https://glassyui.com/r/glass-badge.json` |
| glass-progress | registry:ui | A glass progress bar for known values, with a sweeping state for unknown lengths. | `npx shadcn@latest add https://glassyui.com/r/glass-progress.json` |
| glass-spinner | registry:ui | A small spinning ring that tells screen readers something is loading. | `npx shadcn@latest add https://glassyui.com/r/glass-spinner.json` |
| glass-skeleton | registry:ui | A glass placeholder block, circle or set of text lines shown while content loads. | `npx shadcn@latest add https://glassyui.com/r/glass-skeleton.json` |
| glass-alert | registry:ui | A tinted glass message with four tones, an icon and an optional dismiss button. | `npx shadcn@latest add https://glassyui.com/r/glass-alert.json` |
| glass-avatar | registry:ui | A round photo that falls back to initials, with a presence dot and stacked groups. | `npx shadcn@latest add https://glassyui.com/r/glass-avatar.json` |
| glass-kbd | registry:ui | A keycap for showing keyboard shortcuts in menus, hints and docs. | `npx shadcn@latest add https://glassyui.com/r/glass-kbd.json` |
| glass-scroll-area | registry:ui | A scroll container with a thin glass scrollbar that shows on hover and while scrolling. | `npx shadcn@latest add https://glassyui.com/r/glass-scroll-area.json` |
| glass-dock | registry:ui | A row of app icons on a glass shelf, with labels on hover and focus. | `npx shadcn@latest add https://glassyui.com/r/glass-dock.json` |
| glass-breadcrumb | registry:ui | A breadcrumb trail to the current page, with an ellipsis for folded steps. | `npx shadcn@latest add https://glassyui.com/r/glass-breadcrumb.json` |
| glass-pagination | registry:ui | Numbered page buttons with previous and next, folding long runs into an ellipsis. | `npx shadcn@latest add https://glassyui.com/r/glass-pagination.json` |
| glass-sheet | registry:ui | A modal glass panel that slides in from a screen edge; bottom sheets drag down to close. | `npx shadcn@latest add https://glassyui.com/r/glass-sheet.json` |
| glass-menu | registry:ui | A glass dropdown menu with shortcuts, checkbox and radio items, and submenus. | `npx shadcn@latest add https://glassyui.com/r/glass-menu.json` |
| glass-command | registry:ui | A searchable command list that filters as you type, alone or in a dialog. | `npx shadcn@latest add https://glassyui.com/r/glass-command.json` |
| glass-lens | registry:ui | A draggable magnifier with a glass rim that bends the content beneath it. | `npx shadcn@latest add https://glassyui.com/r/glass-lens.json` |
| glass-scene | registry:ui | A WebGL2 canvas that refracts a backdrop image through the glass components inside it. | `npx shadcn@latest add https://glassyui.com/r/glass-scene.json` |
| glass-logo-reveal | registry:ui | A WebGL2 logo sting: a ball of thick glass swells around your mark, squares into a glass tile and clears, leaving the real mark. | `npx shadcn@latest add https://glassyui.com/r/glass-logo-reveal.json` |
| glass-laptop | registry:ui | A CSS 3D laptop mockup whose screen shows your screenshot or React content. | `npx shadcn@latest add https://glassyui.com/r/glass-laptop.json` |
| glass-phone-duo | registry:ui | A WebGL2 folding phone mockup with your screenshots on both displays. | `npx shadcn@latest add https://glassyui.com/r/glass-phone-duo.json` |
| glassy-theme | registry:theme | Gives stock shadcn/ui components the Glassy UI look, tinted from your own palette, with one command. | `npx shadcn@latest add https://glassyui.com/r/glassy-theme.json` |
| glassy-ui-new-york | registry:ui | Replaces shadcn/ui's new-york components (Radix (radix-ui)) with Glassy UI versions that keep their API, so your imports stay as they are. | `npx shadcn@latest add https://glassyui.com/r/glassy-ui-new-york.json` |
| glassy-ui-base-nova | registry:ui | Replaces shadcn/ui's base-nova components (Base UI (@base-ui/react)) with Glassy UI versions that keep their API, so your imports stay as they are. | `npx shadcn@latest add https://glassyui.com/r/glassy-ui-base-nova.json` |

## For AI agents

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