@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.
Install this registry
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 curl -s https://glass-ui.crenspire.com/r/registry.json Components
49 totalDisplays 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 Displays a card with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/card.json Displays a form input field with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/input.json Displays a form textarea with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/textarea.json Renders an accessible label associated with controls.
npx shadcn@latest add https://glass-ui.crenspire.com/r/label.json 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 An image element with a fallback for representing the user.
npx shadcn@latest add https://glass-ui.crenspire.com/r/avatar.json 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 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 Visually or semantically separates content with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/separator.json 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 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 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 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 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 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 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 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 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 Displays a callout for user attention with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/alert.json 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 Displays the path to the current resource using a hierarchy of links.
npx shadcn@latest add https://glass-ui.crenspire.com/r/breadcrumb.json 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 components built with Recharts with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/chart.json An interactive component which expands/collapses a panel.
npx shadcn@latest add https://glass-ui.crenspire.com/r/collapsible.json Fast, composable, unstyled command menu for React.
npx shadcn@latest add https://glass-ui.crenspire.com/r/command.json An image cropper component with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/cropper.json A drawer component for mobile with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/drawer.json For sighted users to preview content available behind a link.
npx shadcn@latest add https://glass-ui.crenspire.com/r/hover-card.json Accessible one-time password component with copy paste functionality.
npx shadcn@latest add https://glass-ui.crenspire.com/r/input-otp.json A collection of links for navigating websites.
npx shadcn@latest add https://glass-ui.crenspire.com/r/navigation-menu.json Pagination with page navigation with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/pagination.json Augments native scroll functionality for custom, cross-browser styling.
npx shadcn@latest add https://glass-ui.crenspire.com/r/scroll-area.json 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 A sidebar component with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/sidebar.json 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 An opinionated toast component for React.
npx shadcn@latest add https://glass-ui.crenspire.com/r/sonner.json A responsive table component with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/table.json A two-state button that can be either on or off.
npx shadcn@latest add https://glass-ui.crenspire.com/r/toggle.json 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 A theme switcher component with optional glassy variant.
npx shadcn@latest add https://glass-ui.crenspire.com/r/mode-toggle.json A loading spinner component with glassy variants.
npx shadcn@latest add https://glass-ui.crenspire.com/r/spinner.json A group of buttons with glassy variants.
npx shadcn@latest add https://glass-ui.crenspire.com/r/button-group.json A group of inputs with glassy variants.
npx shadcn@latest add https://glass-ui.crenspire.com/r/input-group.json An empty state component with glassy variants.
npx shadcn@latest add https://glass-ui.crenspire.com/r/empty-state.json A menu bar component with glassy variants.
npx shadcn@latest add https://glass-ui.crenspire.com/r/menu-bar.json A date picker input component with glassy variants.
npx shadcn@latest add https://glass-ui.crenspire.com/r/date-picker-input.json A context menu component with glassy variants.
npx shadcn@latest add https://glass-ui.crenspire.com/r/context-menu.json A carousel component with glassy variants.
npx shadcn@latest add https://glass-ui.crenspire.com/r/carousel.json