DialKit
Tune interfaces in real time with live controls bound to your components.
- DialKit is a tool for shaping interfaces by feel, with live controls you bind to your code.
- It offers sliders, toggles, text, select, color, image, pad, and spring or easing controls.
- Values are bound through a useDialKit hook and a single DialRoot mount.
- A timeline lets you scrub and edit animation timing, and versions can be saved as you tune.
- The editor is hidden in production unless productionEnabled is set.
Why it matters
- It is aimed at designers and design engineers who want to adjust animation, layout, and styling values live instead of by recompiling.
- It works with React, Solid, Svelte, Vue, and plain JavaScript, and can be wired up by a coding agent.
- Website
- dialkit.dev1
- Install
- npm install dialkit motion1
- Core API
- DialRoot mount and useDialKit hook1
- Frameworks
- React, Solid, Svelte, Vue, JavaScript1
- Controls
- Slider, toggle, text, select, color, image, pad, spring/easing, timeline1
Control reference highlights
-
Set a default, minimum and maximum; optional step; drag, click, or type a value.
-
Hex, RGB, HSL, OKLCH and Display P3 colors detected automatically.
-
Adjust two numbers together, with per-axis ranges, steps and labels.
Connections
Links
Sources
Last checked against its sources today
Is something on this page wrong or out of date? Tell us
How recent
The line under a date fills as time passes: empty when new, then one equal share each for a day, a week, a month and a year. For episodes and other items it is full at 2 years; for "last checked", at a year. A striped line means the date is known only to the month or year.