@vuer-ai/vuer-uikit

v0.2.1

Published

6 days ago

React UI Kit components

0High
0Medium
0Low

react ui components kit

vuer-uikit

Documentation & Examples: uikit.vuer.ai

Installation

Getting up and running is quick and easy.

1. Install Vuer Uikit

Install the package from your command line.

npm install @vuer-ai/vuer-uikit

2. Import the CSS file

Import the global CSS file at the root of your application.

@import "tailwindcss";

@import "@vuer-ai/vuer-uikit/index.css";

@source "../../packages/vuer-uikit/src/ui/**/*.{ts,tsx}";

3. Add the Theme component

Add ThemeProvider to your application, wrapping the root component inside of body.

import { ThemeProvider } from "@vuer-ai/vuer-uikit";

export default function () {
  return (
    <html>
      <body>
        <ThemeProvider>
          <App />
        </ThemeProvider>
      </body>
    </html>
  );
}

4. Start building

You are now ready to use Vuer Uikit components.

import { Button } from "@vuer-ai/vuer-uikit";

export default function MyApp() {
  return (
    <div>
      <Button>Let's go</Button>
    </div>
  );
}

CLI Tools

dial-cli - Dial Schema Generator

The vuer-uikit package includes dial-cli, a powerful CLI tool for generating dial metadata from TypeScript/React components with @dial annotations.

Usage

After installing @vuer-ai/vuer-uikit, the dial-cli command is available via npx:

# Show version and git hash
npx dial-cli --version

# Generate metadata for a single component
npx dial-cli MyComponent.tsx

# Specify output directory
npx dial-cli -o ./metadata MyComponent.tsx

# Process multiple files
npx dial-cli Component1.tsx Component2.tsx Component3.tsx

# Get detailed help
npx dial-cli --help

Running from Source (Development)

You can also run the TypeScript source directly without compilation:

# Run directly using tsx
npx tsx node_modules/@vuer-ai/vuer-uikit/src/cli/dial-cli.ts --version

@dial Annotations

The CLI parses JSDoc comments with @dial annotations to generate UI metadata:

interface BoxProps {
  /**
   * Position in 3D space
   * @dial transform
   * @dial-dtype vector3
   * @dial-mins -10,-10,-10
   * @dial-maxs 10,10,10
   * @dial-steps 0.1,0.1,0.1
   * @dial-icon Move3d
   */
  position: [number, number, number];
  
  /**
   * Visibility toggle
   * @dial visibility
   * @dial-dtype boolean
   * @dial-icon Eye
   */
  visible: boolean;

  /**
   * Rotation in degrees
   * @dial transform
   * @dial-dtype euler
   * @dial-min 0
   * @dial-max 360
   * @dial-step 1
   */
  rotation: [number, number, number];
}

Available Annotations

Grouping & Organization:

@dial <group> - Group related properties (transform, visibility, geometry, segments)
@dial-ignore - Exclude property from schema generation

Property Configuration:

@dial-dtype <type> - Data type (vector3, euler, boolean, int, string, etc.)
@dial-min <number> - Minimum value for numeric inputs
@dial-max <number> - Maximum value for numeric inputs
@dial-step <number> - Step increment for numeric inputs
@dial-default <value> - Default value (overrides component default)
@dial-options [...] - Array of preset values
@dial-icon <name> - Lucide icon name for the control

Layout & Display:

@dial-col-<n> - Display in column layout with n columns
@dial-row-<n> - Display in row layout with n items per row
@dial-label-<pos> - Label position (left, right, top, bottom, inline)
@dial-no-wrap - Prevent line wrapping

Vector Types:

@dial-mins <n,n,n> - Comma-separated min values for vector elements
@dial-maxs <n,n,n> - Comma-separated max values for vector elements
@dial-steps <n,n,n> - Comma-separated step values for vector elements
@dial-dtypes <t,t,t> - Comma-separated data types for vector elements
@dial-placeholders <x,y,z> - Placeholder text for vector inputs
@dial-tooltips <tip1,tip2,tip3> - Tooltips for vector elements

Output Files

The CLI generates three JSON files for each component:

*-raw.json - Raw output from react-docgen-typescript
*-combined.json - Enhanced metadata with dial schemas and type definitions
*-schemas.json - Clean dial schemas ready for UI generation

CLI Options

Options:
  -o, --output <dir>     Output directory (default: ./metadata)
  -i, --ignore <prop>    Properties to exclude (supports patterns)
  -v, --version          Show version and git hash
  -h, --help            Display help
  --verbose             Detailed output
  --quiet               Suppress output except errors

Example Build Script

Create a script to automate metadata generation:

#!/bin/bash
# generate-dial-metadata.sh

echo "Generating dial metadata..."

# Show version info
npx dial-cli --version

# Generate metadata for all components
npx dial-cli \
    --output ./metadata \
    src/components/*.tsx

echo "Metadata generation complete!"

For more examples and documentation, visit uikit.vuer.ai/dial

Using Dial with Claude Code

We provide three focused Claude Code skills to assist with different aspects of the Dial system:

Skill 1: dial-cli - For CLI tool assistance

/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial-cli/SKILL.md

Skill 2: dial - For runtime component integration

/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial/SKILL.md

Skill 3: vuer-uikit - For UI component library

/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/uikit/SKILL.md

Or add all to your project's CLAUDE.md file:

@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial-cli/SKILL.md
@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial/SKILL.md
@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/uikit/SKILL.md

Each skill provides focused reference information for its domain.

Customizing your theme

Configuration is managed and applied via the Theme component.

Basic configuration

Using CSS Variables and color utilities for theming.

@theme inline {
  --brand-primary: var(--bg-custom-primary);
  --brand-hover: var(--bg-custom-secondary);
}

:root {
  --bg-custom-primary: rgba(0, 123, 255, 1);
  --bg-custom-secondary: rgba(82, 177, 255, 1);
}