34 component specs

Liquid glass components

Material, geometry, the optics numbers, anatomy, states and rules for every component, each with its reference renders. It is what the Meniscus MCP server hands your assistant.

Controls

Buttons, bars and inputs: glass that floats over content.

Two rows of capsule buttons showing primary, secondary, tinted, clear, destructive and disabled states over a procedural backdrop.ButtonPrimary and secondary actions.Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop.Icon buttonSingle-icon actions: undo/redo chips, floating action, search button next to a tab bar.Filter chips above a panel of selected, unselected and disabled radio options over a procedural backdrop.ToggleOn/off toggle buttons and single-choice radios.Four switch rows showing on, off, held thumb and disabled states in a glass panel over a procedural backdrop.SwitchBinary setting.Checked, unchecked, mixed and disabled checkbox rows in a glass panel over a procedural backdrop.CheckboxMulti-select.Two labelled sliders in a glass panel, with resting and held lens thumbs over a procedural backdrop.SliderContinuous value.Two labelled quantity steppers in a glass panel, each a single capsule with flat minus and plus controls, over a procedural backdrop.StepperNumeric input with −/+.Segmented date-range and appearance controls with inset selected pills over a procedural backdrop.TabsSwitch between views or modes.A phone feed with a landscape photo scrolling under an inset floating tab bar, with a selected pill and a separate search lens.Tab barPrimary mobile navigation.A glass formatting toolbar with text-style, alignment and list groups split by hairlines, two items selected, over a procedural backdrop.ToolbarGroup of related actions.A collection page whose hero of zoomed desert ridges carries a floating capsule navigation bar and a separate round search button.Navigation barTop navigation / site nav strip.A desktop menu strip with one item open into a dropdown of shortcuts, dividers and disabled items, over zoomed desert ridges.MenubarRow of menus (desktop).A full-height frosted library sidebar flush with the window edge, with section labels, accent icons, counts and a selected row, over a procedural backdrop.SidebarPersistent navigation on large screens.A language selector with its capsule trigger and an open grouped list with a checked option, over zoomed desert ridges.SelectChoose one value from a list.A short statistics card beside a more frosted notes card with actions over a procedural backdrop.CardGrouping surface in the controls/overlay layer (settings group, playground card, widget panel).Weather, weekly activity chart and battery widgets side by side over a procedural backdrop.WidgetGlanceable home/lock-screen or dashboard tile.Text inputs showing an error, helper text, multiline entry and verification-code boxes over a procedural backdrop.InputText entry.A capsule search field with a separate suggestion list below it, over zoomed desert ridges.Search fieldSearch entry.Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop.AvatarPerson or entity.A glass panel holding two determinate progress tracks and an indeterminate one, over zoomed desert ridges.ProgressCompletion or level.Three stacked accordion rows with the middle one expanded into a text panel, over zoomed desert ridges.AccordionExpandable sections.Circular playback controls and a scrubber over a procedural scene dimmed toward the bottom.Media controlsPlayback controls over media.A floating glass dock carrying generic app icons with running indicators over a procedural backdrop.DockDesktop app launcher strip.

Overlays

Menus, sheets and dialogs that open above everything else.

An action menu hanging below its capsule trigger, with icons, shortcuts, dividers and a destructive row, over zoomed desert ridges.MenuCommand list opened from a trigger.A standalone context menu with shortcuts, a divider and a disabled command, over zoomed desert ridges.Context menuMenu at the pointer.A playback settings popover below a round icon trigger, with two switches and a small confirmation capsule, over zoomed desert ridges.PopoverRich floating panel anchored to a trigger.A small shortcut tooltip floating above the first of three round icon buttons, over zoomed desert ridges.TooltipShort label for a control.A frosted confirmation dialog over a dimmed, blurred dune scene, with a filled confirm field, a glass Cancel and a solid red Delete.DialogBlocking decision or form.A floating bottom sheet with a grabber, a title, two actions and a short body line, over a street map with a route inside a phone frame.SheetTask surface from the bottom (mobile) or side.Two stacked notification cards at the lower right, with a solid trigger button at the top left, over zoomed desert ridges.ToastTransient feedback.

Content

What sits inside the glass or in the content layer: mostly flat, by rule.

Solid count badges on two glass icon buttons, a presence dot on an avatar and a standalone label pill over a procedural backdrop.BadgeCount or status.A grouped settings list with coloured icons, dividers, trailing details and a switch over a procedural backdrop.ListScrolling rows of content.Three compact settings rows separated by inset hairlines inside a glass panel over a procedural backdrop.SeparatorDivide rows inside a glass body.A row of generic app icons followed by one icon in default, dark, clear and tinted material variants over a procedural backdrop.App iconApp or feature icon in the glass style.