Motion-first React blocks for developer tools
Code blocks, terminals and status that read like the tools developers already trust.
25 components today · 8 blocks on the way · all in Pro
Everything a developer tools dashboard template is made of
Each one is the real component, running. Open it for usage, props and its motion, then install it into your app with one command.
A trail from the root to the current page that folds its middle crumbs into a menu when it runs out of room, measured rather than guessed, with links that underline on hover.
A file tree whose folders open on a height spring as the chevron turns, both interruptible.
A product tour whose scrim cutout springs between targets, morphing size and concentric radius while the tooltip re-anchors.
A layout primitive that exposes outer, padding and inner radius as CSS variables so nested corners stay concentric.
A status or count chip.
A Base UI button whose press scale depends on its width, whose label swaps with y + blur while the width springs, and whose loading spinner overlays the label so the width never changes.
A chat composer that grows on a spring, opens an attachments row with Auto Height, and morphs its Send arrow into a Stop square while a reply streams.
A keycap that presses down when the real key does: the face drops 1px onto its base and springs back on release.
A panel that opens from its trigger's transform-origin with a 5px directional offset, closes at half the distance in 150ms, and reverses mid-flight.
A progress bar on Base UI Progress: the bar rides a spring and its value rolls; an unknown length sweeps with an accelerate–decelerate curve and hands over to the bar when a value arrives.
A native scroller with a thin themed overlay scrollbar that thickens under the pointer, and edge fades that appear only when there is more to scroll.
A soft band of light sweeps across a label while something is working.
A quarter arc turning on a faint ring, the eased.dev status-badge mark.
Tabs with a gliding indicator (underline or pill) and panels that cross-fade 6px in the direction of travel while their container's height springs.
Change a label, status or short value with y + blur, and spring the width to fit, so neighbours glide instead of jumping.
The line above a reasoning model's answer: the label shimmers while a seconds counter rolls, then "Thinking" morphs into "Thought for 12s" and the reasoning folds away a second after the answer starts.
A small living orb for an assistant's state: colour fields drift inside a glassy sphere and it breathes, idle, listening, thinking or speaking, with its speed tied to the token rate so it keeps pace with the stream.
Toggle buttons sharing one highlight: it travels between items in single mode, and pressed neighbours fuse into one shape in multiple mode.
A short label that waits 400ms for the first trigger, then follows the pointer instantly across its neighbours.
A word-sized line chart that draws in once, rings its newest point in the surface colour and morphs to new values from the shape on screen.
Shiki-highlighted code in warm stone and cream themes, with a file title bar and language pill, a copy button that morphs into a check while "Copied" slides out, highlighted and focused lines, and long blocks that collapse under a progressive blur with "Show 22 more lines".
Several files, or one command per package manager, in one code block: the underline glides between tabs, the code cross-fades 6px in the direction of travel while the height springs, and with a groupId every block on the page switches together and remembers the choice.
A one-line command with a $ prompt and a copy button that morphs into a check.
A macOS menu bar popover: a status item and a frosted panel whose arrow and panel are one shape, so one blur and one hairline follow the arrow.
The macOS volume and brightness overlay: a frosted, click-through HUD in the classic 200×200 square or the macOS 26 pill.
Blocks for developer tools, on the way
Full blocks composed from the components above, each with one signature moment. They land here, dated, as they release; the changelog has the schedule.
Coming
Deploy Log
Coming
CI Pipeline
Coming
PR Review
Coming
Terminal Onboarding
Coming
Status Page
Coming
Webhook Debugger
Coming
Branch Graph
Coming
API Keys
Install into your agent
Add the Eased MCP server and ask for what you are building. Its list and search tools take an industry, so your agent starts from the developer tools set.
claude mcp add --transport http eased https://eased.dev/api/mcpThen: list_components { "industry": "devtools" }
Questions
Is this a developer tools dashboard template?
It is the parts a developer tools dashboard template is made of: 25 live components today, with blocks such as Deploy Log, CI Pipeline and PR Review on the way. You compose them in your own app, and the source lives in your repo, so it fits your product exactly.
What does Pro include?
Every Eased component and block, in every industry, now and in every future release, for one payment. Free components stay free under MIT.
How do updates arrive?
New components and blocks release on a dated schedule, listed in the changelog and its RSS feed. Install them with the shadcn CLI or through the MCP server whenever they suit you.
What is the stack?
React 19, Tailwind CSS v4 and Motion, installed with the shadcn CLI. Every component supports light and dark themes and reduced motion.
Everything for developer tools, in Pro.
One payment for every component and block, in every industry, including each one still to come.