# DialKit

> A floating control panel to tune animation and UI parameters in real time. Wire sliders, toggles, color pickers, spring editors and easing curves directly to your values, organize them into nested folders, and export presets as JSON. Auto-detects control types from a plain config object and works with React, Solid, Svelte and Vue.

- Author: [Josh Puckett](https://21st.dev/@dialkit)
- License: mit
- Tags: Animation, Control, Developer Tool
- npm dependencies: dialkit
- Live preview: https://21st.dev/@dialkit/components/dialkit

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dialkit/dialkit?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/animation.md