Provider
Sets the theme and accessibility preferences that every Glassy UI component follows.
Components
38 accessible React components. Each one installs as source with one command.
Core
Surfaces
Surface
The glass material as a plain div, for building your own glass components.
Panel
A glass container in a panel, card or pill shape.
ALGHATKJ
ALGHATKJ+1
AvatarNew
A round photo that falls back to initials, with a presence dot and stacked groups.
Search⌘K
Undo⌘Z
Closeesc
KbdNew
A keycap for showing keyboard shortcuts in menus, hints and docs.
- Version 2.6Search finds files by their contents.
- Version 2.5Shared folders sync in the background.
- Version 2.4Pin a project to keep it at the top.
- Version 2.3Undo now reaches back a whole day.
- Version 2.2Export a board as a single image.
- Version 2.1Comments show who has read them.
Scroll AreaNew
A scroll container with a thin glass scrollbar that shows on hover and while scrolling.
Controls
Button
A glass button with four variants, three sizes and an asChild mode for links.
Input
A recessed glass text field with an optional label and hint.
CheckboxNew
A glass checkbox with an optional label, description and indeterminate state.
For trying things out.
For teams shipping weekly.
For everything else.
Radio GroupNew
A group of glass radio buttons where exactly one option is chosen.
TextareaNew
A recessed glass text area that can grow with its text.
SelectNew
A select field whose options open on a raised glass panel.
Switch
A glass on/off switch in two sizes.
Slider
A glass slider for one value or a range, with one named thumb per value.
Segmented Control
A single-choice glass control for two to six options, with a draggable selection.
Overlays
Dialog
A modal glass dialog with an overlay, a focus trap and a close button.
Popover
A glass popover anchored to the control that opens it.
Sheet
A modal glass panel that slides in from a screen edge; bottom sheets drag down to close.
Menu
A glass dropdown menu with shortcuts, checkbox and radio items, and submenus.
CommandNew
A searchable command list that filters as you type, alone or in a dialog.
Navigation
HeaderNew
A floating glass header with a brand, navigation links, actions and a compact menu.
A glass lozenge slides to the selected tab.
Tabs
Tabs on a glass pill, with one indicator that moves to the selected tab.
Accordion
Collapsible glass sections that open one at a time or several at once.
Dock
A row of app icons on a glass shelf, with labels on hover and focus.
BreadcrumbNew
A breadcrumb trail to the current page, with an ellipsis for folded steps.
PaginationNew
Numbered page buttons with previous and next, folding long runs into an ellipsis.
Feedback
Tooltip
A small glass label that appears on hover and keyboard focus.
Toast
A glass notification for brief updates that screen readers announce.
LiveNewBetaPausedFailedDraft
Badge
A small tinted glass label for status, counts and categories.
Uploading35%
ProgressNew
A glass progress bar for known values, with a sweeping state for unknown lengths.
Loading smallLoadingLoading large
SpinnerNew
A small spinning ring that tells screen readers something is loading.
SkeletonNew
A glass placeholder block, circle or set of text lines shown while content loads.
Heads up
Your trial ends in three days.
Saved
Every change is in.
Almost full
You have used 92% of your storage.
Payment failed
Update your card to keep your plan.
AlertNew
A tinted glass message with four tones, an icon and an optional dismiss button.
Effects
A closer look at the details.
Lens
A draggable magnifier with a glass rim that bends the content beneath it.
Glassy UI
Light bends at every edge.
Scene
A WebGL2 canvas that refracts a backdrop image through the glass components inside it.
Logo RevealNew
A logo sting: a ball of thick glass swells around your mark, squares into a glass tile and clears, leaving the real mark.
Mockups
Demos ready. Update 0.