---
name: "@glass-ui"
slug: "glass-ui"
description: "A shadcn-compatible registry of 49 glassmorphic React/TypeScript components with an Apple-inspired dark-glass aesthetic. Covers the full shadcn primitive set (Accordion through Tooltip) in glass variants, plus unique additions: Cropper, Date Picker Input, Empty State, Spinner, and Input Group. Components default to glass styling via Tailwind CSS v4 and include a Liquid Glass variant with SVG displacement refraction. Includes MCP server configuration for AI-assisted integration. Free and open-source. Use for: building apps that need a cohesive frosted-glass or liquid-glass visual identity across all interactive controls."
category: "Theming/styling"
tags: ["accessibility", "aesthetic", "ai", "auth", "buttons", "cards", "charts", "dashboard", "forms", "glassmorphism", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: null
author: "crenspire"
website: "https://glass-ui.crenspire.com"
github: "https://github.com/crenspire/glass-ui"
registry: "https://glass-ui.crenspire.com/r/registry.json"
pro: false
pro_url: null
github_stars: 85
component_count: 49
generated_at: "2026-07-28T08:59:05.895Z"
---

# @glass-ui

A shadcn-compatible registry of 49 glassmorphic React/TypeScript components with an Apple-inspired dark-glass aesthetic. Covers the full shadcn primitive set (Accordion through Tooltip) in glass variants, plus unique additions: Cropper, Date Picker Input, Empty State, Spinner, and Input Group. Components default to glass styling via Tailwind CSS v4 and include a Liquid Glass variant with SVG displacement refraction. Includes MCP server configuration for AI-assisted integration. Free and open-source. Use for: building apps that need a cohesive frosted-glass or liquid-glass visual identity across all interactive controls.

## Links

- Website: https://glass-ui.crenspire.com
- GitHub: https://github.com/crenspire/glass-ui
- Registry JSON: https://glass-ui.crenspire.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/glass-ui
- This file: https://sh4dcn.vercel.app/md/glass-ui.md

## Install

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

## Components (49)

| name | type | description | install |
| --- | --- | --- | --- |
| button | registry:component | Displays a button or a component that looks like a button with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/button.json` |
| card | registry:component | Displays a card with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/card.json` |
| input | registry:component | Displays a form input field with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/input.json` |
| textarea | registry:component | Displays a form textarea with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/textarea.json` |
| label | registry:component | Renders an accessible label associated with controls. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/label.json` |
| badge | registry:component | Displays a badge or a component that looks like a badge with glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/badge.json` |
| avatar | registry:component | An image element with a fallback for representing the user. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/avatar.json` |
| dialog | registry:component | A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/dialog.json` |
| alert-dialog | registry:component | A modal dialog that interrupts the user with important content and expects a response. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/alert-dialog.json` |
| separator | registry:component | Visually or semantically separates content with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/separator.json` |
| switch | registry:component | A control that allows the user to toggle between checked and not checked with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/switch.json` |
| checkbox | registry:component | A control that allows the user to toggle between checked and not checked with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/checkbox.json` |
| tabs | registry:component | A set of layered sections of content—known as tab panels—that are displayed one at a time with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/tabs.json` |
| tooltip | registry:component | A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/tooltip.json` |
| popover | registry:component | Displays rich content in a portal, triggered by a button with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/popover.json` |
| dropdown-menu | registry:component | Displays a menu to the user — such as a set of actions or functions — triggered by a button with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/dropdown-menu.json` |
| select | registry:component | Displays a list of options for the user to pick from—triggered by a button with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/select.json` |
| radio-group | registry:component | A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/radio-group.json` |
| skeleton | registry:component | Use to show a placeholder while content is loading with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/skeleton.json` |
| alert | registry:component | Displays a callout for user attention with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/alert.json` |
| accordion | registry:component | A vertically stacked set of interactive headings that each reveal a section of content. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/accordion.json` |
| breadcrumb | registry:component | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/breadcrumb.json` |
| calendar | registry:component | A date field component that allows users to enter and edit date. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/calendar.json` |
| chart | registry:component | Chart components built with Recharts with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/chart.json` |
| collapsible | registry:component | An interactive component which expands/collapses a panel. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/collapsible.json` |
| command | registry:component | Fast, composable, unstyled command menu for React. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/command.json` |
| cropper | registry:component | An image cropper component with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/cropper.json` |
| drawer | registry:component | A drawer component for mobile with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/drawer.json` |
| hover-card | registry:component | For sighted users to preview content available behind a link. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/hover-card.json` |
| input-otp | registry:component | Accessible one-time password component with copy paste functionality. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/input-otp.json` |
| navigation-menu | registry:component | A collection of links for navigating websites. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/navigation-menu.json` |
| pagination | registry:component | Pagination with page navigation with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/pagination.json` |
| scroll-area | registry:component | Augments native scroll functionality for custom, cross-browser styling. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/scroll-area.json` |
| sheet | registry:component | Extends the Dialog component to display content that complements the main content of the screen. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/sheet.json` |
| sidebar | registry:component | A sidebar component with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/sidebar.json` |
| slider | registry:component | An input where the user selects a value from within a given range. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/slider.json` |
| sonner | registry:component | An opinionated toast component for React. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/sonner.json` |
| table | registry:component | A responsive table component with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/table.json` |
| toggle | registry:component | A two-state button that can be either on or off. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/toggle.json` |
| toggle-group | registry:component | A set of two-state buttons that can be toggled on or off. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/toggle-group.json` |
| mode-toggle | registry:component | A theme switcher component with optional glassy variant. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/mode-toggle.json` |
| spinner | registry:component | A loading spinner component with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/spinner.json` |
| button-group | registry:component | A group of buttons with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/button-group.json` |
| input-group | registry:component | A group of inputs with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/input-group.json` |
| empty-state | registry:component | An empty state component with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/empty-state.json` |
| menu-bar | registry:component | A menu bar component with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/menu-bar.json` |
| date-picker-input | registry:component | A date picker input component with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/date-picker-input.json` |
| context-menu | registry:component | A context menu component with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/context-menu.json` |
| carousel | registry:component | A carousel component with glassy variants. | `npx shadcn@latest add https://glass-ui.crenspire.com/r/carousel.json` |

## For AI agents

```text
You are adding components from @glass-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/glass-ui.md) for the component list.
2. Fetch the machine-readable index: https://glass-ui.crenspire.com/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: glass-ui).
```