Guides CSS
How to copy a component from a website into React
Install Verbatim, the free Chrome extension, and open the page. Press Alt+Shift+P, choose Pick element, click the component, then set the target to React and choose JS or TS. You get JSX with className, self-closing tags and camelCased SVG attributes, beside the CSS that actually applied to the whole subtree and the custom properties it reads.
What you need first
Verbatim is a free Chrome extension that reads the CSS actually applying to a live page, by resolving the cascade rather than dumping computed styles. Thirteen tools sit on a toolbar inside the page itself, not in a popup: pick an element, measure it, pull the palette and type scale, turn the page into a prompt, or hand any of it to a coding agent.
It is free forever with no account and no sign in, nothing is uploaded anywhere, and it works in Chrome, Edge, Brave, Arc and Opera. Install it, then follow the steps below on any page, including one behind a login.
What "copy a component" actually requires
Copying the markup is the part everyone does, and it is the part that never renders. A component needs four things, and a right-click copy gives you one of them.
| What a component needs | Copy the outer HTML | Copy computed styles | Cascade extraction |
|---|---|---|---|
| The markup, as JSX | HTML you convert by hand: class, for, style strings, unclosed tags. | Nothing. It copies styles, not structure. | JSX already, with className, self-closing tags and camelCased SVG attributes. |
| The styles on the children | None. The children arrive unstyled. | One element only, so the children arrive unstyled. | Every rule touching the whole subtree, in cascade order. |
| Inherited values | None, so the font and colour come from wherever you paste it. | Present but flattened, so you cannot tell inherited from declared. | Supplied as a context class on the root, so the component brings its own inheritance. |
| Tokens, states, breakpoints | None. | Flattened, dropped and dropped. | Token names and literals, states as rules, media queries as media queries. |
The third column is why the copy renders. Copying CSS from a website covers the mechanism in full.
How to copy a component into React, step by step
One pick, then a target. Switching the target does not re-read the page, so you can compare React against plain HTML before deciding.
- Add Verbatim to Chrome. It is a free extension, there is no account and no sign in, and it works in Chrome, Edge, Brave, Arc and Opera.
- Open the page and press Alt+Shift+P, or click the Verbatim icon.
- Choose Pick element and click the component. Use the up arrow to widen the selection to the whole card rather than the heading inside it.
- Leave scope on Component. That takes the element and everything inside it, which is what makes the result render on its own.
- Set the target to React, and choose JavaScript or TypeScript.
- Copy the markup pane for the component and the CSS pane for its styles. Check both against the live preview underneath before pasting.
- In your project, decide how the CSS lands: a plain file, a CSS module, or Tailwind utilities from the Tailwind tab.
Vue, Svelte, Astro and Angular are the same switch, and TypeScript is a toggle beside it. The CSS does not change between targets; only the markup does.
The JSX conversion, and what it handles
HTML is not JSX, and the differences are exactly the ones that produce a wall of console warnings when you convert by hand:
classbecomesclassName,forbecomeshtmlFor.- Void elements are self-closed:
<img>becomes<img />. - SVG attributes are camelCased:
stroke-widthbecomesstrokeWidth,viewBoxkeeps its capital B. - Inline
stylestrings become objects with camelCased properties. - Comments and entities are converted rather than left to break the parse.
What you get is a function component returning the markup. It is a starting point with correct structure and correct styles, not a finished component, which is the next section.
Where to put the CSS
Three options, and the right one depends on the project rather than on the component.
- A plain CSS file next to the component. Simplest, and it keeps the extracted rules readable and reviewable, which matters when you are checking a copy against a reference.
- A CSS module. Same rules, scoped, with the class names imported. Rename the machine-generated class names as you go, or let the extension do it: with an AI key set, it renames
.css-1x2y3zto.pricing-cardacross the markup and the CSS at once, and discards any answer that altered a value. - Tailwind utilities from the Tailwind tab instead of the CSS pane. See converting a website's CSS to Tailwind, and take the theme block with it.
What you still have to do by hand
A copied component is structure and appearance. Four things are yours, and no extraction tool can supply them:
- Behaviour. Whatever JavaScript made the original interactive is not in the CSS or the markup. A dropdown copies as an open dropdown, not as a dropdown that opens.
- Props and state. The copy is one instance with the original's content in it. Deciding what is a prop is design work.
- Content and images. The text and the asset URLs belong to the original site. Replace them. Images and SVGs is for taking your own assets off your own pages, not for hotlinking someone else's.
- Accessibility. Copied markup inherits the original's semantics, including its mistakes. A div with a click handler is still a div. Check roles, labels and focus order before you ship it.
Checking the component renders correctly
Two checks, one instant and one strict.
The window renders the extraction in an isolated frame underneath the code, at the component's own width, on the surface it sits on. If that preview matches the live component, the extraction is sound and only the React conversion is left to review.
For a stricter answer, or for an agent doing this without you, the MCP server exposes verify_extraction, which renders the copy and diffs it against the live element property by property, reporting every computed style that differs.
Questions
How do I copy a component from a website into React?
Pick the component with the extension, keep scope on Component so the children come with it, set the target to React and choose JS or TS. You get JSX with className and self-closing tags, beside every CSS rule that applied to the subtree and the custom properties those rules read.
Does it convert HTML to JSX properly?
Yes: class becomes className, for becomes htmlFor, void elements are self-closed, SVG attributes are camelCased, and inline style strings become objects. Those are the conversions that otherwise produce a wall of console warnings.
Why does the component look unstyled when I copy the HTML myself?
Because the styles live on the children and in what the component inherits, and copying the outer HTML brings neither. Component scope collects every rule touching the whole subtree and supplies the inherited context on the root element, which is what makes the copy render on its own.
Can I get Vue, Svelte, Astro or Angular instead?
Yes, as a switch on the same pick, with TypeScript as a toggle beside it. The CSS is identical across targets; only the markup changes.
Will the copied component be interactive?
No. Whatever JavaScript made the original interactive is not in its CSS or markup. A dropdown copies as an open dropdown rather than as one that opens, so the behaviour is yours to write.
How do I handle the generated class names?
Either keep them, so the CSS applies unchanged, or rename them. With an AI key set, the extension renames a class such as .css-1x2y3z to .pricing-card across the markup and the CSS at once, and discards any answer that altered a declaration.
How do I check the copy is accurate?
The live preview under the code renders the extraction in isolation at the component’s own width. For a strict check, the MCP server’s verify_extraction renders the copy and diffs it against the live element property by property.