DialKit — Tune interfaces in real time

Fancy

Demo

Installation

Install DialKit via npm:

npm install dialkit

Or just tell your agent to set it up:

Install DialKit in this repo

If installing manually, add <DialRoot /> to your layout, and import the styles:

import { DialRoot } from 'dialkit'import 'dialkit/styles.css' export default function Layout({ children }) {  return (    <>      {children}      <DialRoot />    </>  )}

That's it. Now you can use the useDialKit hook in any component.

Prompts to get started

The easiest way to start using DialKit is to describe what you want and let your coding agent wire it up. Here are a few prompts to try.

Add DialKit to an existing animation:

I have a card component with a hover animation. Add DialKit controls so I can tune the spring physics (visualDuration and bounce), scale on hover, and shadow blur in real time. Use the useDialKit hook with a spring config and sliders.

Build something new with DialKit from scratch:

Create a spring-animated modal component using Motion. Add DialKit controls for: the entrance spring (visualDuration and bounce), overlay opacity, content border radius, and a "replay" action button that re-triggers the entrance animation.

Tune layout and spacing:

Add DialKit to this grid layout. I want sliders for gap, padding, column count (1-6), and card border radius. Group the card-specific controls into a "Card" folder. Use the values directly in the component's style props.

Explore visual variations:

Create a notification toast component with a slide-in animation from the top. Add DialKit controls for: entrance spring, vertical offset, blur amount, background opacity, and a toggle for showing/hiding the close button. Add a "trigger" action to fire a new toast.