UI Components Overview

SceneryStack splits reusable, pre-built Nodes across two libraries with different scopes: sun provides generic, domain-agnostic controls (the things any application needs — buttons, sliders, checkboxes), while scenery-phet provides PhET-simulation-specific visualizations and controls built on top of sun and scenery. Knowing which library a component lives in tells you how broadly reusable it's meant to be.

sun: generic UI controls

Everything in sun is bound to an axon Property and otherwise has no domain knowledge — a Checkbox doesn't know or care whether it's toggling gravity or sound.

import { Checkbox, HSlider, RectangularPushButton, ComboBox, AccordionBox, Panel } from 'scenerystack/sun';

Component	Use it for
Checkbox	A single boolean toggle with a label Node
HSlider / VSlider	Continuous numeric input bound to a NumberProperty and Range
RectangularPushButton / TextPushButton	A momentary action button
RectangularRadioButtonGroup / RadioButtonGroup	Mutually-exclusive selection from a small fixed set of options
ComboBox	Mutually-exclusive selection from a longer list, in a dropdown
Panel	Bordered/background container that auto-sizes to its content
AccordionBox	Collapsible titled container, e.g. an optional "advanced controls" section
ABSwitch / ToggleSwitch	A labeled two-state switch, an alternative to Checkbox for some layouts

Live demos

These controls have interactive embeds on their API pages. Try them here, then follow the links for full option tables.

sun

Checkbox API

HSlider API

RectangularPushButton API

scenery-phet

NumberControl API

ResetAllButton API

Compose these with FlowBox/GridBox rather than positioning each one by hand:

import { VBox } from 'scenerystack/scenery';
import { Checkbox, HSlider } from 'scenerystack/sun';
import { Text } from 'scenerystack/scenery';

const controlPanel = new VBox( {
  spacing: 8,
  align: 'left',
  children: [
    new Checkbox( gravityEnabledProperty, new Text( 'Gravity' ) ),
    new HSlider( massProperty, massProperty.range! )
  ]
} );

scenery-phet: simulation-specific visualizations

scenery-phet builds on sun and scenery to provide components that show up across many PhET simulations but aren't generic enough for sun — visual metaphors for physical quantities, and the handful of controls every sim needs regardless of subject matter.

import { ResetAllButton, NumberControl, ThermometerNode, ArrowNode, PhetFont } from 'scenerystack/scenery-phet';

Component	Use it for
ResetAllButton	The standard "reset the whole screen" button — see the Reset-All Pattern
NumberControl	A labeled slider plus numeric readout plus increment/decrement, bundled together
ThermometerNode	A fluid-level thermometer bound to a temperature Property
ArrowNode	A vector/force-style arrow, sized and rotated from model data
FaceNode	A smiley/frowny face, common in game-style feedback
HeaterCoolerNode	The heater/cooler control used across thermodynamics sims
PhetFont	The standard PhET typeface — use it instead of ad hoc font strings for visual consistency

Choosing between them

If it doesn't mention a physical quantity, it probably belongs in sun

A rule of thumb: if you can describe a component without referencing anything domain-specific ("a checkbox," "a slider," "a bordered panel"), it's sun. If describing it requires a physical concept ("a thermometer," "a force arrow," "a heater/cooler"), it's scenery-phet. When you need something novel to your sim's domain that isn't in either library, build it as a plain Node/Path composition in your own view/ folder rather than trying to force-fit an existing component — see Project Structure Conventions.

Where to go next

• Scenery Layout — arranging these components with FlowBox/GridBox/AlignBox
• The Reset-All Pattern — the standard use of ResetAllButton
• Building Your First Screen — assembling these into a full ScreenView