Component to Code

About

Component to Code lets you hover over any element on a webpage and instantly generate clean, reusable code.

**How it works:**
1. Click the extension icon and select "Start Picking"
2. Hover over any UI element — see a highlighted border with dimensions
3. Click to capture — get HTML + Tailwind, React, or Vue code in the side panel
4. Copy and paste into your project

**Features:**
-  Instant element selection with hover preview
-  Smart Tailwind class mapping (colors, spacing, typography)
-  One-click output: HTML + Tailwind / React / Vue
-  Shadow DOM isolated overlay — no style conflicts
-  All processing happens locally — no data leaves your browser

**Privacy:**
This extension reads DOM and computed styles only from the current active tab when you explicitly start picking. No data is collected, transmitted, or stored remotely.

**Permissions:**
- `activeTab`: To access the current page only when you start picking
- `scripting`: To inject the picker overlay on demand
- `storage`: To save your code style preferences
- `sidePanel`: To display the generated code