Live controls for tuning interfaces in real time. Adjust values, compare versions, and edit animation timing in your running app.
Included Components
34
HumanAgentDemoInstallUsagePromptsAdd DialKit to an existing animation:Tune layout and spacing:Tune an animation timeline:Control referenceSliderToggleTextSelectColorImagePadSpringEasingActionFolderTimelineSlider ControlToggle SwitchText InputSelect DropdownColor PickerImage Upload2D Pad ControllerSpring Physics VisualizerEasing Curve EditorAction ButtonsCollapsible FoldersKeyframe Parameter Timeline
DialKit puts live parametric controls right next to the interface you are designing or engineering. Rather than continually context-switching between code editors, hot reloads, and browser inspect panels, DialKit renders an elegant floating toolbar containing sliders, 2D touch pads, spring physics tuners, and timeline scrubbers. It supports React, Solid, Svelte, Vue, and vanilla JS, allowing designers and AI agents to tune layouts, colors, and motion timings by feel.
