Components

AudioUI provides ready-to-use controls (knobs, sliders, buttons, cycle buttons, piano keys), bitmap-based controls that use your own assets (film strips and image knobs/switches), and primitives for fully custom controls. For design philosophy and performance priorities, see the Introduction. For more context on each type before diving into individual components, see the Vector introduction and Raster introduction.

Components fall into four types: Vector Components, Raster Components, Control Primitives, and View Primitives. The table below compares these types on several criteria so you can see how they differ and choose the right one.

Comparing the four component types

Each column is one component type and links to its documentation. The rows are comparison criteria (attributes):

• Opinionated: Fixed look-and-feel choices vs full control over appearance (you supply or compose the view).
• Themable (built-in): Whether the component type supports the built-in theme system (ThemeManager, color, roundness).
• Resolution-independent scaling: Whether the visual scales without pixelation (SVG) or may pixelate when scaled (bitmap). View primitives are mostly resolution-independent but not always (e.g. bitmap used in a compound view).
• Default view: Whether the component type provides ready-to-use visuals without supplying assets.
• Optimization responsibility: Who is responsible for performance and optimization. For view primitives: user for compound views; the primitives themselves are framework-optimized.
• Dark/light variants: Built-in theme support for light and dark mode; or (raster) props to supply separate dark and light assets with transition managed by the component; or user responsibility / N/A.
• Completeness: Whether the component type is considered complete or will receive new components, variants, or primitives over time.

Attribute	Vector Components	Raster Components	Control Primitives	View Primitives
Opinionated	Yes	No	No	No
Themable (built-in)	Yes	No	No	No
Resolution-independent scaling	Yes	No (may pixelate)	Depends on view	Mostly
Default view	Yes	No (requires assets)	No	No
Optimization responsibility	Framework	Framework	User	User (compound views); primitives framework-optimized
Dark/light variants	Built-in	Yes (dark/light assets)	N/A	User responsibility
Completeness	Will expand (components, variants, theming)	Complete	Complete (parameter model complete)	May expand (new primitives)

• Vector Components (Knob, Slider, Button, CycleButton, Keys) are opinionated: they aim to cover 90% of needs with fixed look-and-feel choices; not everything is customizable. They are themable, scale without pixelation, and have a default view.
• Raster Components (film strip and image-based controls) are unopinionated: you supply the assets, so any visual representation is possible. They do not use the built-in theme system and may pixelate when scaled.
• Control Primitives and View Primitives are non-opinionated building blocks: you compose a custom view and are responsible for styling and optimization. View primitives include vector primitives (SVG fragments) and may include other building blocks; use them when you need full control over appearance.

Next steps

• Use Vector Components (e.g. Knob, Slider) for ready-to-use, themable controls and Theming Features.
• Use Raster Components when you have bitmap assets (sprite sheets or images) and want pixel-accurate or custom visuals.
• Use Control Primitives and View Primitives to build fully custom controls.