Components
45 components across 6 categories — every one in the Liquid Glass material.
Forms
A clickable action in five variants, with a tactile gel-press and an accent glow.
A set of related actions grouped in a single glass bar.
A translucent text field with an accent focus ring.
A multi-line translucent text field with resize control.
A binary selection control with an accent check mark.
A group of mutually exclusive options in the glass material.
A toggle for binary settings with a springy thumb.
Drag to pick a value along a refractive track.
A dual-handle slider for selecting a numeric range.
A segmented one-time-password field with per-cell focus.
Pickers
A dropdown picker with glass popover and keyboard navigation.
A searchable select with live filtering of options.
A calendar popover for selecting a single date.
A calendar popover for selecting a start and end date.
A clock-style input for selecting hours and minutes.
A swatch grid and hex input for picking colors.
Overlays
A centered modal over a blurred scrim.
A ⌘K palette for fast navigation and search.
A floating glass panel anchored to a trigger element.
A preview card that appears on pointer hover.
A right-click glass menu with nested item support.
A slide-in panel from any edge of the screen.
A brief label that appears near an element on hover.
A transient notification snack bar with accent variants.
Navigation
A segmented control for switching between content panels.
A trail of links showing the current location hierarchy.
Page-number controls for navigating large data sets.
A glass menu that opens below a trigger button.
A horizontal bar of menus for app-level navigation.
A top-level nav with mega-dropdown columns.
A full collapsible navigation shell with icon mode, groups and sub-menus.
Data
A glass surface container for grouping related content.
Compact status labels in solid, soft and outline styles.
A circular image or initials placeholder for a user.
An inline message with an icon and accent color variant.
A glowing accent bar for determinate progress.
An animated placeholder shown while content loads.
A horizontal or vertical divider line between sections.
Expandable sections that reveal content on click.
Sortable, selectable rows with status badges and a row menu.
Charts
A filled line chart for visualizing trend data over time.
A column chart for comparing values across categories.
A ring chart for displaying proportional data segments.
Concentric arcs showing multiple percentage metrics at once.
A multi-series chart with an interactive glass tooltip.