UI-Ray Inspector

X-ray vision for web interfaces. Inspect instantly, copy to CSS, Tailwind or React in one click.

UI-Ray is the CSS inspector that actually fits your workflow. Stop digging through DevTools. Hover over any element on any website and instantly see its design properties — then copy them as clean CSS, Tailwind classes, or React inline styles with one click. ⚡ WHAT UI-RAY DOES → Hover Inspector: Point at any element. See margin, padding, font, color, border-radius and box-shadow instantly. → Tailwind Export: Maps computed values to real Tailwind classes (e.g. padding: 16px → p-4). Copy-ready in seconds. → Distance Measurement: Hold Alt to see pixel distances between elements, Figma-style. → Color & Font Audit: Extracts every unique color and font family from any page. Exports as a clean palette. → Multi-format Copy: Switch between CSS / Tailwind / React inline styles from the same panel. → Copy History: Last 10 inspected elements stored in the popup for quick access. 🎯 BUILT FOR Developers building UI with Tailwind or React who want to inspect sites faster. Designers reviewing spacing and visual consistency across live pages. Freelancers reverse-engineering layouts to speed up client work. 💡 HOW IT WORKS 1. Click the UI-Ray icon to activate inspect mode. 2. Hover over any element — a clean panel appears with all its styles. 3. Select your output format (CSS / Tailwind / React) and click copy. 4. Paste directly into your code editor. Done. No account required. Works on any website. Runs 100% locally — no data ever leaves your browser. 🔓 FREE PLAN: 3 inspections per day. ⚡ PRO LICENSE ($39 one-time): Unlimited inspections, all export formats, lifetime updates.