Capture a component

A component is a piece of a page: a button, a card, a whole section. PocketUI captures it as real code, including how it looks when you hover it and how it changes on a phone.

Where to click ToolbarExportCode
Hover, click, captured.

Steps

  1. 1

    Click Export in the toolbar, then Code. Or press X.

  2. 2

    A pill appears at the top of the page: Whole page or click an element to export its code.

  3. 3

    Move your mouse over the page. A purple outline shows what will be captured, with its name above it.

  4. 4

    Click. You see Capturing element…, then Component captured!

  5. 5

    A panel opens with a preview. Nothing is saved yet: click Save to your folder to keep it.

    The Save tile names its folder. The small chevron in its top-right corner opens your folder list to pick another.

What you get

  • The component's structure and its real styles, not a picture.
  • Hover, focus, pressed, disabled and other states.
  • Breakpoints: the rules that change it on tablets and phones.
  • A preview you can switch between desktop and phone size.

What is in the panel

  • The name: click it to rename. Press Enter to keep it, Esc to cancel.
  • Desktop / phone switch, top right: the preview redraws at that screen size.
  • The preview: click it (or Open full size) to open it in a new tab.
  • HTML · Tailwind · React · Vue: the code language. See Export as code.
  • Copy, Download, Save to your folder.
  • What was captured: opens a short report, including anything that looks missing.

Hover states and breakpoints

You do not need to do anything special. PocketUI reads the page's own style rules, so a button that changes color when you hover it still does in your copy, and a section that stacks on a phone still stacks. In Tailwind these become prefixes like hover: and md:.

Switch the preview to phone to check the mobile layout before you copy it.

The whole page

Click Whole page in the pill instead of an element. Whole-page export is part of the Studio plan and counts as one export (see Plans and limits).

Tips

  • Closing the panel without clicking Save keeps nothing: exporting and keeping are separate.
  • Pick the smallest piece that does the job. A single card is easier to reuse than a whole page.
  • Press Esc at any time to cancel a tool. The toolbar stays where it is.