Open the toolbar and take the tour
Click the PocketUI icon and a dark toolbar appears at the bottom of the page. Everything PocketUI does starts from it. The demo below is clickable: try it.
Steps
- 1
Click the PocketUI icon in your browser bar. The toolbar slides up at the bottom of the page.
- 2
Hover any button to see its name.
- 3
Click the small arrow in the tools to show the rest of them.
- 4
To close the toolbar, press Esc or click the PocketUI icon again.
The toolbar, left to right
| Button | What it does |
|---|---|
| Magnifier | Search your library. See Library and search. |
| Pick a color (pipette) | Save any color on the page. See Pick a color. |
| Screenshot (camera) | Drag over an area to save it. See Take a screenshot. |
| Scan fonts (Aa) | Find every font on the page. See Scan fonts. |
| Save page (bookmark) | Keep the page with a preview. See Save a page. |
| Arrow | Shows the rest: Scan gradients, Scan images and Scan SVGs & icons. |
| Export | Opens a fan of destinations: Code, Figma, Elementor, Bricks, Webflow and Shopify. |
| Folders | Opens a fan of your folders, plus All folders. See Folders. |
| Your initials | Your account: storage, saves this month, shortcuts, AI integration, Send feedback, Take the tour and Sign out. |
Pin your favourite tools
- 1
Right-click any tool in the toolbar.
- 2
Click Pin to front. The tool moves to the front of the toolbar and gets a small dot under it.
- 3
To undo it, right-click the tool again and click Unpin.
Export destinations pin the same way: open Export, right-click a petal, then Pin to front.
Keyboard shortcuts
They work while the toolbar is open, as long as you are not typing in a box.
| Key | What it does |
|---|---|
C | Pick a color |
S | Screenshot |
X | Capture a component (the same as Export → Code) |
F | Export to Figma |
Esc | Cancel the tool that is running, then close the panel, then close the toolbar |
The guided tour
The first time you sign in, a one-minute tour walks you through the toolbar: it waits for you to click each part. To see it again, click your initials, then Take the tour.