Inspect fonts, colors & spacing on any page. Copy as Tailwind, React, or Vue — ready to paste into your AI coding tool.
Users
5
−1 in 30 days
Rating
0.0 / 5
unchanged in 30 days
Ratings
0
0 in 30 days
Store rank
#253K
#211K among extensions
Version
1.1.2
updated 13 Aug 2026
Users
monthly, 8 months
Latest, 16 Oct 2026:5 usersMove the mouse over the chart for any month
Ratings count
monthly, 8 months
Latest, 16 Oct 2026:0 ratingsMove the mouse over the chart for any month
The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.
About Oculay — CSS & Design Inspector with Tailwind/React Export
Stop switching between DevTools and Figma just to answer "what font is this? how much padding?"
◆ What it does
✓ Hover any element to instantly see font, size, line-height, colors, spacing, and radius
✓ Extract the page's full color palette and font list
✓ Visualize Flexbox / Grid layout structure
✓ Copy inspected styles as Tailwind classes, React, or Vue code in one click
✓ Extract assets from the page
✓ Figma-like side panel UI that stays out of your way
◆ Made for
- Frontend engineers doing design QA (spec vs. implementation)
- Designers & PMs checking how things were actually built
- AI-assisted coding: copy real styles from any site and paste them into Claude, Cursor, or your favorite AI tool as precise context
◆ How to use
1. Click the Oculay icon
2. Hover / click the element you want to inspect
3. Copy in the format you need (Tailwind / React / Vue)
◆ Permissions
- activeTab: inspects only the tab you're on
- Access to all sites: so it works on any page you choose. No browsing data is collected or transmitted
- sidePanel: displays inspection results
◆ Privacy
Everything runs locally in your browser. No history or page content ever leaves your device.
Actively developed — feature requests and bug reports are very welcome via the Support tab.