ui.rip
Docs Login
100% free · No signup required

See How Any Website Is Built

Paste a URL and instantly explore its component tree, CSS, layout structure, and design tokens.

https://

Works on React, Next.js, Vue, Angular, and any modern site

What the inspector reveals

See under the hood of any website — for free

Component tree

<Header>
<Nav>
<Logo />
<NavLinks />
</Nav>
</Header>
<Hero>
<Headline />
<CTAButton />
</Hero>

CSS properties

display: flex
gap: 1.5rem
padding: 2rem 3rem
border-radius: 12px
background: #0F1115
font-family: Inter

Layout grid overlay

Visualize flex and grid containers, gaps, alignment, and responsive breakpoints on any page.

Design tokens

#3B82F6 #F5F5F5 #0A0A0B Inter 400/500/600 4/8/12/16px spacing

Developers use the free inspector to

Real use cases, zero cost

🔍

Study top UI teams

See exactly how Stripe, Linear, and Vercel structure their components and design systems.

🛠

Debug CSS issues

Diagnose layout problems on production sites with layout grid overlays and computed style inspection.

🎨

Extract design tokens

Pull colors, spacing scales, typography, and border radii from any live site into your own project.

📈

Benchmark competitors

Understand competitor UI patterns, framework choices, and component architecture at a glance.

Want the full code, not just the inspection?

Upgrade from inspect to a full Next.js project download

Free forever

Inspect

  • ✓ Component tree
  • ✓ CSS properties
  • ✓ Layout grid overlay
  • ✓ Design token extraction
  • — Downloadable code
  • — React components
  • — Tailwind styling

$0

Always free, no limits

Full power

Full rip

  • ✓ Everything in Inspect
  • ✓ Downloadable Next.js project
  • ✓ React components
  • ✓ Tailwind CSS styling
  • ✓ TypeScript interfaces
  • ✓ Asset extraction
  • ✓ Responsive layout

$3–5 per site

Pay per rip, no subscription

Upgrade to a full rip for $3–5 →

Try it on any site

Paste a URL. See the results instantly. No signup needed.

https://

100% free · Works on any modern website

Frequently asked questions

Is the inspector really free? +
Yes, 100% free with no limits. The UI inspector is a standalone feature that lets you explore any website's component structure, CSS, and design tokens at no cost. No signup, no credit card, no trial period.
What can I see with the free inspector? +
The inspector shows you the component tree (how elements are nested), CSS properties for any element, a layout grid overlay (flex/grid visualization), and design tokens including colors, fonts, and spacing scales used across the site.
What's the difference between inspecting and generating? +
Inspecting (free) lets you explore a site's structure, styles, and design tokens in a read-only view. Generating (paid, $3–5) creates a downloadable Next.js project with React components, Tailwind CSS, TypeScript interfaces, and extracted assets — ready to run with npm install.
Does the inspector work on SPAs? +
Yes. The inspector uses a real browser engine that fully renders JavaScript-heavy single-page applications, including those built with React, Vue, Angular, Svelte, Next.js, Nuxt, and other modern frameworks. It captures the post-hydration DOM.
Can I use this for competitive analysis? +
Absolutely. The inspector is a great tool for understanding how competitors structure their UIs, what frameworks they use, and what design patterns they follow. It only reads publicly accessible front-end code — the same information available in any browser's DevTools.