Robot Components

React components from the Robot Design System.

Installation

npm install robot-components

Components

Task Panel

A draggable task panel with physics-based interactions.

import { TaskPanel } from 'robot-components';

function App() {
  const tasks = [
    { id: '1', name: 'cosmic-nebula', status: 'processing' },
    { id: '2', name: 'azure-crystal', status: 'completed', size: '12.5 MB' },
  ];

  return (
    <TaskPanel
      tasks={tasks}
      onTaskClear={(id) => console.log('Clear task:', id)}
      onClearAll={() => console.log('Clear all')}
    />
  );
}

Features

• Drag & throw with real momentum
• Bounces off screen edges with damping
• Impact sounds that scale with velocity
• Lifts up with deeper shadow while dragging
• Spring-animated expand/collapse
• Touch support for mobile

Props

TaskItem

interface TaskItem {
  id: string;
  name: string;
  status: 'completed' | 'processing';
  size?: string;
  thumbnail?: string;
  gradient?: string;
}

Node Editor Canvas

An interactive node editor with draggable panels, connections, and physics.

Features

• Click to spawn nodes anywhere on the canvas
• Drag & throw panels with momentum and edge bouncing
• Connect panels by dragging from corner handles
• Slice connections by dragging through lines
• Resize panels from edges and corners
• Keyboard shortcuts: Shift for grid snap, Cmd+drag for scale from center
• Dynamic dot grid that responds to panel movement
• WebGL noise overlay for visual texture

Demo

Run the demo to see both components in action:

npm run dev

Then visit:

• http://localhost:3000 - Component overview
• http://localhost:3000/taskpanel - Task Panel demo
• http://localhost:3000/nodegrid - Node Editor demo

Peer Dependencies

• react >= 18.0.0
• react-dom >= 18.0.0
• framer-motion >= 10.0.0
• lucide-react >= 0.300.0
• tailwindcss >= 4.0.0

Development

# Install dependencies
npm install

# Run demo site
npm run dev

# Build library
npm run build

Extending with Claude Code

This repo includes Claude Code skills to help you customize and expand the components—no coding experience required.

Setup

1. Install Claude Code if you haven't already
2. Clone this repository:

   git clone https://github.com/dashrobotco/robot-components.git
   cd robot-components

3. Open Claude Code in the project directory:

   claude

Available Skills

/node-editor-expand

Use this command to add features to the Node Editor Canvas:

/node-editor-expand Add a glow effect around panels when selected

/node-editor-expand Add double-click to edit panel content

/node-editor-expand Add Cmd+D to duplicate the selected panel

/node-editor-expand Add magnetic snapping when panels get close to each other

Tips for Best Results

• Be specific: "Add a button in the top-right corner of each panel"
• Describe interactions: "Add a color picker on right-click with 6 preset colors"
• Reference existing behavior: "Add wobble animation like the bounce effect"
• Mention edge cases: "Ask for confirmation before deleting connected panels"

License

MIT