Dev Controls
Interactive control-panel components for building admin UIs in component demos. These sit inside the dark control strip below each DevCanvas and give demo viewers live knobs for every prop.
Usage Pattern
DevCanvas + adminProps. The standard path — pass an adminProps ref to DevCanvas and PropsMachine auto-generates controls.
DevControls panel. For custom control layouts beyond what PropsMachine provides — sliders, color pickers, dropdowns, organized into collapsible sections.
Compose freely. Slider, Color, Select, and Section can be mixed and nested inside a Controls wrapper for any demo need.
Live Examples
Control panel with sections
DevControls wraps sliders, color inputs, and selects. DevControlSection groups them with collapsible headers.
PropsMachine auto-generation
Pass a reactive object and PropsMachine creates the right control for each type: toggles for booleans, text inputs for strings, steppers for numbers, sliders for ranges, dropdowns for options.