Extract & export
Export to React
Export any website section to React with Pickode: JSX with BEM classes and CSS built only from the author's rules, or React + Tailwind.
Updated October 20, 2026
Use the React export when you want to bring a section you like, or a section of a site you’re migrating, into a React project as a component. Pickode gives you two flavours: React (JSX + CSS) with BEM classes, and React + Tailwind.
How to export a section to React
-
Open the inspector with Alt+I on any page and click the section or component you want.
-
Choose React in the export window (or React + Tailwind if your project uses Tailwind).
-
Check the isolated preview at 375, 768, 1024 and 1280 px, or in one of the 27 device frames.
-
Copy the code or download the files and drop them into your project.
What you get
| Format | Output |
|---|---|
| React (JSX + CSS) | A JSX component with BEM class names and a CSS file with the author’s rules |
| React + Tailwind | A JSX component with Tailwind classes, using arbitrary values from the author’s CSS |
Both formats are built from the site’s original stylesheets, not from the values the browser computed. That means the CSS is short and keeps what the author wrote:
- every
@media,@supportsand@containerrule; - states such as
:hover,:focus,:focus-visible,:focus-withinand:active, also when they sit on an ancestor (for example.card:hover .title); ::beforeand::after;var()resolved to the site’s value, and relative URLs made absolute.
For the details of how the CSS is read, see Export to HTML + CSS. For how Tailwind classes are generated, see Export to Tailwind.
Free and Pro
Limits
Pickode is for learning, inspiration, auditing and migrating sites you work on. Respect copyright and licenses, and don’t republish others’ designs, text or images without permission.
Related
Still stuck?Contact us