Quick Start - 5 Minutes to Your First Dial UI

Get your first Dial control panel running in 5 minutes. We'll build a simple color and size controller.

1. Install (30 seconds)

# Install the UI components
npm install @vuer-ai/vuer-uikit

# Install the CLI globally
npm install -g @vuer-ai/dial-cli

2. Create Your First Component (1 minute)

Create a file ColorBox.tsx:

// ColorBox.tsx
import React from 'react';

interface ColorBoxProps {
  /**
   * Box color
   * @dial appearance
   * @dial-dtype color
   * @dial-icon Palette
   */
  color: string;

  /**
   * Box size
   * @dial appearance
   * @dial-dtype int
   * @dial-min 50
   * @dial-max 300
   * @dial-step 10
   * @dial-icon Square
   */
  size: number;

  /**
   * Border radius
   * @dial appearance
   * @dial-dtype int
   * @dial-min 0
   * @dial-max 50
   * @dial-step 1
   * @dial-icon RoundedCorner
   */
  borderRadius: number;

  /**
   * Show box
   * @dial appearance
   * @dial-dtype boolean
   * @dial-icon Eye
   */
  visible: boolean;
}

export const ColorBox: React.FC<ColorBoxProps> = ({
  color,
  size,
  borderRadius,
  visible
}) => {
  if (!visible) return null;

  return (
    <div
      style={{
        width: size,
        height: size,
        backgroundColor: color,
        borderRadius: borderRadius,
        transition: 'all 0.3s ease'
      }}
    />
  );
};

3. Generate Schema (30 seconds)

dial-cli ColorBox.tsx -o ./metadata

This creates ./metadata/schema.dial with your UI schema.

4. Create Your App (2 minutes)

Create App.tsx:

// App.tsx
import React, { useState } from 'react';
import { DialProvider, DialPanel } from '@vuer-ai/vuer-uikit';
import { ColorBox } from './ColorBox';
import dialSchemas from './metadata/schema.dial';

// Get the generated schema
const colorBoxSchema = dialSchemas[0];

function App() {
  const [props, setProps] = useState({
    color: '#3b82f6',
    size: 150,
    borderRadius: 10,
    visible: true
  });

  const handleValueChange = (name: string, value: any) => {
    setProps(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div style={{ display: 'flex', gap: '2rem', padding: '2rem' }}>
      {/* Control Panel */}
      <div style={{ width: '300px' }}>
        <h2>Controls</h2>
        <DialProvider
          schemas={colorBoxSchema.schemas}
          onValueChange={handleValueChange}
        >
          <DialPanel
            schemas={colorBoxSchema.schemas}
            groups={colorBoxSchema.groups}
          />
        </DialProvider>
      </div>

      {/* Preview */}
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <h2>Preview</h2>
        <ColorBox {...props} />
      </div>
    </div>
  );
}

export default App;

5. Run It! (1 minute)

npm run dev

🎉 That's it! You now have an interactive control panel for your component.

Live Demo

{
  "color": "#3b82f6",
  "size": 150,
  "borderRadius": 10,
  "visible": true
}

What Just Happened?

1. You annotated your TypeScript interface with @dial comments
2. The CLI parsed your code and generated a UI schema
3. DialProvider & DialPanel rendered interactive controls from the schema
4. Your component updates in real-time as you adjust the controls

What's Next?

Now that you have a working example:

Common Questions

Q: Do I need to manually write schemas? A: No! The dial-cli automatically generates schemas from your TypeScript code.

Q: Can I use this with existing components? A: Yes! Just add @dial annotations to your existing interfaces.

Q: What if I don't want to use the CLI? A: You can write schemas manually, but the CLI saves a lot of time.

Q: Is TypeScript required? A: The CLI works best with TypeScript, but you can write schemas manually for JavaScript.