Xtractlytractly

React · Tailwind CSS · shadcn/ui-ready · .zip export

A UI component librarybuilt from real sites

Everything you capture with the extension lands in your Xtractly library — a canvas of your saved components, organised by project, with design tokens alongside. Open any component to edit it live, branch a variant, or hand it to your AI.

Install ExtensionRead the docs

Free with an account · Chrome, Edge & Brave

01

Capture

Save components straight from the extension as you browse. Bookmarks keep whole pages you want to come back to.

02

Organise

Components sit on boards in the web app with live previews. Keep variants of the same component side by side.

03

Ship

Edit in the Playground, restore any earlier version, and export the code or a .zip when it's ready.

Built for the code you actually ship

  • Live Playground

    Edit a component's files in the browser with an instant preview — no local setup.

  • Variants and history

    Branch variants without overwriting the original, and restore any previous save from the History menu.

  • AI edits

    Select a component and describe the change in chat; the AI edits it in place.

  • Themes and tokens

    Keep design tokens as reusable themes and apply them across a project.

Frequently asked questions

What's the difference between the extension and the web app?

The extension captures — components, colours, fonts and assets from live sites. The web app is where saved work lives: your library, the Playground editor, AI chat, version history and export.

Can I restore an earlier version of a component?

Yes. Every save snapshots the previous state. Restoring also snapshots your current state first, so nothing is lost.

Can my coding agent read my library?

Yes — connect Claude Code, Cursor or any MCP client through the Agent Bridge and it can read your saved components and tokens.

Works well together

Give your AI agent your design system

Learn more about give your AI agent your design system

An MCP server that hands your coding agent your real components and tokens.

Turn any website into React components

Learn more about turn any website into React components

Capture a section as a React (or Vue/Svelte) component and keep iterating on it.

Copy any website component as real code

Learn more about copy any website component as real code

Click any element on a live site and get it back as HTML, React, Vue or Svelte.

Library, Playground & versions

Start today for free

Upgrade when you need more — monthly, yearly, or once for life.

Join Xtractly

Start without a card

Free covers inspecting, capturing and 5 exports a month.

Cancel anytime

No hidden fees. Or pay once for Lifetime and skip renewals.

Clear pricing, no surprises

ProMost popular
$4.99/month

Billed monthly. Cancel anytime.

Upgrade to Pro
  • Everything in Free
  • Unlimited exports — code, Figma & design tokens
  • Save captures to your library & edit them in Studio
  • Full page export & copy
  • Bookmarks
  • REST API access & keys
  • Unlimited Agent Bridge saves
  • Every feature we ship going forward
  • Priority support