UI-Ray Inspector

About

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.