Vector Components

Vector components are the built-in, opinionated controls: Knob, Slider, Button, CycleButton, and Keys. They are not just "vector vs raster": their design comes from a careful analysis of existing audio plugins and apps from many providers, and gathers the visual characteristics and variants found most often in real-world interfaces. The end-goal is to cover about 90% of the needs of most apps and plugins; the remaining 10% (advanced customization) is left to control primitives and vector primitives—totally flexible, but more demanding and requiring care about performance and optimization. Built-in components are designed to optimize performance as far as possible. For how they fit with raster and primitives, see the Components overview under Getting Started.

What all vector components share

Every vector component provides:

• Layout system: AdaptiveBox with sizing modes (fixed sizes or adaptive), label positioning, and alignment. Labels can sit above or below, with configurable overflow and height.
• Parameter model: Support for ad-hoc props (min, max, label, etc.) or the full Audio Parameter model (Continuous, Discrete, or Boolean) for scaling, units, formatting, and MIDI.
• Interaction system: Drag, wheel, and keyboard input with configurable sensitivity and modes. High-frequency state during interaction is handled so the rest of the tree does not re-render on every move.
• Accessibility: ARIA attributes, focus management, and keyboard navigation.
• Theming: Built-in support for primary color and roundness via ThemeManager or per-component props (color, roundness). Dark and light mode work out of the box.
• Visual variants: Multiple variants per component (e.g. Knob: abstract, simplest, plainCap, iconCap; Slider: abstract, trackless, trackfull, stripless) so you can match different plugin or app styles.

Vector components are SVG-based and scale without pixelation. They are the right choice when you want ready-to-use, themable controls without supplying your own assets. Details are in Theming Features below.

Theming Features

• color: Primary (accent) color for the component. Any valid CSS color. Can be set per component via the color prop or globally via ThemeManager (setThemeColor). Used for value indicators, active states, and accents. Dark and light mode work out of the box.
• roundness: Controls corner/edge roundness, normalized 0.0–1.0. Set per component with the roundness prop or globally via setThemeRoundness. Affects tracks, caps, and buttons.
• Future theme attributes: The theme system will expand; attributes such as glowness and reflectiveness are planned (tentative for 1.0.0). See Introduction – Project Status for roadmap.
• Variants: Most components have or will get multiple variants that change their aspect (e.g. Knob: abstract, simplest, plainCap, iconCap; Slider: abstract, trackless, trackfull, stripless). Use the variant prop; see each component's page for options.
• Scale markers: Knob- and slider-style components have or will get options for scale markers (graduations and indices) so you can show tick marks, labels, or minimal scales. Details are on the Knob and Slider pages.

Completeness and roadmap

The vector components library is meant to expand over time: more components (e.g. XY pad, Pitch/Mod wheels and levers, additional keyboard-style controls) and more variants and easy customization (e.g. glowness, reflectiveness) as the theme system evolves. See Theming Features above for current and planned theme options. See Introduction – Project Status for current and planned work.

Next steps

• Knob — rotary continuous control
• Slider — linear continuous control (horizontal or vertical)
• Button — toggle (latch) or momentary
• CycleButton — discrete option cycling
• Keys — piano keyboard