Glassy UI for React and Next.js: 37 glass components, a CSS glass theme, and drop-in component sets.
Collapsible glass sections that open one at a time or several at once.
A tinted glass message with four tones, an icon and an optional dismiss button.
A round photo that falls back to initials, with a presence dot and stacked groups.
A small tinted glass label for status, counts and categories.
A breadcrumb trail to the current page, with an ellipsis for folded steps.
A glass button with four variants, three sizes and an asChild mode for links.
A glass checkbox with an optional label, description and indeterminate state.
A searchable command list that filters as you type, alone or in a dialog.
A modal glass dialog with an overlay, a focus trap and a close button.
A row of app icons on a glass shelf, with labels on hover and focus.
A floating glass header with a brand, navigation links, actions and a compact menu.
A recessed glass text field with an optional label and hint.
A keycap for showing keyboard shortcuts in menus, hints and docs.
A CSS 3D laptop mockup whose screen shows your screenshot or React content.
A draggable magnifier with a glass rim that bends the content beneath it.
A WebGL2 logo sting: a capsule of thick glass carries your mark and name into view and lands on the real lockup.
A glass dropdown menu with shortcuts, checkbox and radio items, and submenus.
Numbered page buttons with previous and next, folding long runs into an ellipsis.
A glass container in a panel, card or pill shape.
A WebGL2 folding phone mockup with your screenshots on both displays.
A glass popover anchored to the control that opens it.
A glass progress bar for known values, with a sweeping state for unknown lengths.
Sets the theme and accessibility preferences that every Glassy UI component follows.
A group of glass radio buttons where exactly one option is chosen.
A WebGL2 canvas that refracts a backdrop image through the glass components inside it.
A scroll container with a thin glass scrollbar that shows on hover and while scrolling.
A single-choice glass control for two to six options, with a draggable selection.
A select field whose options open on a raised glass panel.
A modal glass panel that slides in from a screen edge; bottom sheets drag down to close.
A glass placeholder block, circle or set of text lines shown while content loads.
A glass slider for one value or a range, with one named thumb per value.
A small spinning ring that tells screen readers something is loading.
The glass material as a plain div, for building your own glass components.
A glass on/off switch in two sizes.
Tabs on a glass pill, with one indicator that moves to the selected tab.
A recessed glass text area that can grow with its text.
A glass notification for brief updates that screen readers announce.
A small glass label that appears on hover and keyboard focus.
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.
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.
Gives stock shadcn/ui components the Glassy UI look, tinted from your own palette, with one command.