phosphor-shell-widgets

Material 3 QML atoms every shell surface composes from.

The Phosphor.Widgets atom library: buttons, sliders, text fields, cards, pills, and the interaction and elevation layers underneath them. Pure QML, themed entirely through phosphor-theme's Theme / Motion / StateLayer singletons, so retuning a palette or a motion curve propagates to every widget with no per-widget edit. It also carries the connected-corner primitives a Phosphor bar is built from, where a panel's bottom edge weaves into the popouts growing out of it as a single continuous Shape rather than separate rectangles.

Full API →

Key types

PhosphorButton
M3 button in Filled, Tonal, Outlined, and Text variants.
PhosphorSlider
Continuous horizontal slider; drag the handle or tap the track.
PhosphorCard
Elevated rounded surface container with a padded content area.
PhosphorRipple
Shared hover/press state-layer tint plus expanding press ripple.
ElevationShadow
M3 elevation shadow (levels 0-5), used as a layer.effect.
BarCanvas
Connected-corner bar surface whose edge weaves into its popout sockets.
ConnectedShape
Generic Shape painter for an SVG path; the renderer behind BarCanvas.

Dependencies

See also

phosphor-theme
Supplies the tokens every widget binds its colors and motion through.
phosphor-shell
The framework that hosts surfaces built from these atoms.

References