Magnify Dock
A macOS-style dock whose icons spring up and magnify as the cursor glides across them.
Fine UI, ready to paste.
Paste is a collection of UI components, hand-crafted by Pedro Mello and ready to drop into any LLM.
Components
19 / 19
Segmented Control
A segmented tab switcher with a pill that smoothly slides between options using a shared layout animation.
Copy Button
A copy-to-clipboard button that morphs its icon from clipboard to check and back, with a satisfying spring.
Dropdown Menu
A trigger button that opens a spring-animated menu of actions, with icons, a separator and a destructive item. Closes on outside click.
Command Menu
A ⌘K-style command palette with live search filtering and arrow-key navigation, where the active highlight glides between results.
esc
Select
A custom select that drops a list of options, marks the chosen one with an animated checkmark and dismisses on outside click.
Combobox
A type-to-filter select for forms — search as you type, navigate with arrow keys, pick with Enter or click. Closes on outside click.
Context Menu
A right-click context menu that springs open at the cursor position, with keyboard hints and a destructive action.
Right-click anywhere here
Sidebar
A collapsible navigation sidebar that springs between expanded and icon-only, with an active pill that glides between items.
AI Chat
An AI assistant chat that springs open from a button, collapses its tool calls under “Worked for Ns”, then streams the answer in — with auto-titled history.
Toast
A toast notification stack that springs up from the bottom, layers cleanly and auto-dismisses, with manual close too.
Accordion
A single-open accordion whose panels animate their height smoothly while the plus icon rotates into a cross.
A collection of small, copy-paste-ready UI components. Each one ships with a live demo and a prompt you can hand to an LLM.
Tabs
Underline tabs where the active indicator slides between labels and the panel content crossfades on change.
A quick summary of the project — what it does and who it's for.
Switch
A toggle switch whose knob springs across the track and crossfades a check / cross icon as the state flips.
On
Slider
A draggable range slider with a violet fill, a thumb that scales on grab, and a value bubble that pops above it while dragging.
40
Tooltip
A toolbar of icon buttons, each revealing a spring-in tooltip with a little arrow on hover or keyboard focus.
Setup Card
A setup card that lifts on hover with a layered shadow and a soft sheen, its illustration gently floating beside the CTA.
Setup
Add your first product
Set up your store by adding a product. You can edit the details anytime.
Timeline
An issue activity feed — events stream in along a connecting line with type-coloured nodes, and a comment in a chat bubble. Marking it done springs a final node in (and Reopen removes it).
ENG-204Activity
Pedro created the issue · 2h
Pedro set priority to High · 2h
Ana changed status to In Progress · 1h
Ana assigned Pedro · 47m
Pedro commented · 12m
Pushed a fix — ready for review.
AI Sound Effects Input
A text-to-sound composer — a rail of prompt suggestions, an auto-growing textarea and generation settings, that springs a playable, scrubbable waveform in above it when you generate.
Generations may be shared to the Explore page.