C.194
clickkeyboardspringmotion
Code Walkthrough
A presentation-style code walkthrough: each step highlights a line range, lines grow and collapse between steps, and captions explain.
Typography & Text · React / Motion / Tailwind
Developer Tools
Interfaces for people who build things.
Developer tools are used for hours at a time, mostly from the keyboard. This set favours dense information, fast keyboard paths and honest state — what changed, where you are, what a shortcut does — over decoration.
- C.193clickkeyboardtweenmotion
Text Diff
An animated word- or character-level diff: deletions strike through, insertions type in, inline or side by side with a +12 −5 summary.
Typography & Text · React / Motion / Tailwind
- A.155keyboardfocustweenmotion
Kbd Shortcut
Keycaps for a keyboard shortcut that light up as the keys are physically pressed, with platform-aware modifiers and sequences.
Buttons & Controls · React / Motion / Tailwind
- D.15keyboardclicktweenzero deps
Command Menu
A searchable command palette with grouped commands, fuzzy matching and full keyboard control.
Navigation & Menus · React / CSS / Tailwind
- D.198keyboardclickzero deps
Link Hints
Vimium-style keyboard hints scoped to a container: press F to label every visible control, then type the letters to activate one.
Navigation & Menus · React / CSS / Tailwind
- G.177clickkeyboardzero deps
Data Table
A sortable, selectable table on real <table> semantics with multi-sort, resizable columns, density and paging.
Data & Feedback · React / Tailwind
- D.165clickkeyboardtweenmotion
Tree View
A file-explorer tree on the APG pattern: arrow keys, typeahead, multi-select, tri-state checkboxes and lazy loading.
Navigation & Menus · React / Motion / Tailwind
- F.176keyboardclickspringmotion
Markdown Editor
A textarea Markdown editor with a roving-focus toolbar, undoable formatting, shortcuts and a safe Write / Preview.
Forms & Inputs · React / Motion / Tailwind
- F.175keyboardfocustweenmotion
Slug Input
A URL slug field that follows the title until edited, previews the full URL and checks availability as you type.
Forms & Inputs · React / Motion / Tailwind
- A.36clickhovertweenmotion
Copy Button
A copy-to-clipboard button whose icon morphs into a drawn check, with a tooltip, live announcement and fallback.
Buttons & Controls · React / Motion / SVG / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactMotionTailwindCSSSVG
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion