G
Glassy UI
Glass Accordionglass-accordionCollapsible glass sections that open one at a time or several at once.
Glass Alertglass-alertA tinted glass message with four tones, an icon and an optional dismiss button.
Glass Avatarglass-avatarA round photo that falls back to initials, with a presence dot and stacked groups.
Glass Badgeglass-badgeA small tinted glass label for status, counts and categories.
Glass Breadcrumbglass-breadcrumbA breadcrumb trail to the current page, with an ellipsis for folded steps.
Glass Buttonglass-buttonA glass button with four variants, three sizes and an asChild mode for links.
Glass Checkboxglass-checkboxA glass checkbox with an optional label, description and indeterminate state.
Glass Commandglass-commandA searchable command list that filters as you type, alone or in a dialog.
Glass Dialogglass-dialogA modal glass dialog with an overlay, a focus trap and a close button.
Glass Dockglass-dockA row of app icons on a glass shelf, with labels on hover and focus.
Glass Headerglass-headerA floating glass header with a brand, navigation links, actions and a compact menu.
Glass Inputglass-inputA recessed glass text field with an optional label and hint.
Glass Kbdglass-kbdA keycap for showing keyboard shortcuts in menus, hints and docs.
Glass Laptopglass-laptopA CSS 3D laptop mockup whose screen shows your screenshot or React content.
Glass Lensglass-lensA draggable magnifier with a glass rim that bends the content beneath it.
Glass Logo Revealglass-logo-revealA WebGL2 logo sting: a ball of thick glass swells around your mark, squares into a glass tile and clears, leaving the real mark.
Glass Menuglass-menuA glass dropdown menu with shortcuts, checkbox and radio items, and submenus.
Glass Paginationglass-paginationNumbered page buttons with previous and next, folding long runs into an ellipsis.
Glass Panelglass-panelA glass container in a panel, card or pill shape.
Glass Phone Duoglass-phone-duoA WebGL2 folding phone mockup with your screenshots on both displays.
Glass Popoverglass-popoverA glass popover anchored to the control that opens it.
Glass Progressglass-progressA glass progress bar for known values, with a sweeping state for unknown lengths.
Glass Providerglass-providerSets the theme and accessibility preferences that every Glassy UI component follows.
Glass Radio Groupglass-radio-groupA group of glass radio buttons where exactly one option is chosen.
Glass Sceneglass-sceneA WebGL2 canvas that refracts a backdrop image through the glass components inside it.
Glass Scroll Areaglass-scroll-areaA scroll container with a thin glass scrollbar that shows on hover and while scrolling.
Glass Segmented Controlglass-segmented-controlA single-choice glass control for two to six options, with a draggable selection.
Glass Selectglass-selectA select field whose options open on a raised glass panel.
Glass Sheetglass-sheetA modal glass panel that slides in from a screen edge; bottom sheets drag down to close.
Glass Skeletonglass-skeletonA glass placeholder block, circle or set of text lines shown while content loads.
Glass Sliderglass-sliderA glass slider for one value or a range, with one named thumb per value.
Glass Spinnerglass-spinnerA small spinning ring that tells screen readers something is loading.
Glass Surfaceglass-surfaceThe glass material as a plain div, for building your own glass components.
Glass Switchglass-switchA glass on/off switch in two sizes.
Glass Tabsglass-tabsTabs on a glass pill, with one indicator that moves to the selected tab.
Glass Textareaglass-textareaA recessed glass text area that can grow with its text.
Glass Toastglass-toastA glass notification for brief updates that screen readers announce.
Glass Tooltipglass-tooltipA small glass label that appears on hover and keyboard focus.
Glassy UI components for shadcn/ui (base-nova)glassy-ui-base-novaReplaces 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.
Glassy UI components for shadcn/ui (new-york)glassy-ui-new-yorkReplaces shadcn/ui's new-york components (Radix (radix-ui)) with Glassy UI versions that keep their API, so your imports stay as they are.