sh4dcnv2 · atlas
← libraries

@glassyui

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

41 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://glassyui.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://glassyui.com/r/registry.json
bun bunx shadcn@latest add https://glassyui.com/r/registry.json
fetch registry curl -s https://glassyui.com/r/registry.json

Components

41 total
Glass Provider 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 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 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 ui

A glass container in a panel, card or pill shape.

npx shadcn@latest add https://glassyui.com/r/glass-panel.json
Glass Header 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 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 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 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 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 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 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 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 ui

A glass popover anchored to the control that opens it.

npx shadcn@latest add https://glassyui.com/r/glass-popover.json
Glass Tooltip 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 ui

A glass notification for brief updates that screen readers announce.

npx shadcn@latest add https://glassyui.com/r/glass-toast.json
Glass Accordion 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 ui

A glass on/off switch in two sizes.

npx shadcn@latest add https://glassyui.com/r/glass-switch.json
Glass Slider 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 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 ui

A small tinted glass label for status, counts and categories.

npx shadcn@latest add https://glassyui.com/r/glass-badge.json
Glass Progress 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 UI theme for shadcn/ui 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 components for shadcn/ui (new-york) 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 components for shadcn/ui (base-nova) 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