B.128
dragkeyboardspringmotion
Kanban Board
Drag cards within and between columns with a lifted ghost, animated placeholder, WIP limits and full keyboard moves.
Cards & Containers · React / Motion / Tailwind
App Builder Kit
The parts every product ends up needing.
Product interfaces are made of the same dozen structures, built again in every codebase. These are the dense, keyboard-heavy pieces — drag between columns, resize panes, edit in place, mention a teammate, onboard a new user — each with complete ARIA patterns and keyboard paths, so the hard parts are already done.
- B.127dragkeyboardtweenzero deps
Resizable Panels
Split panes with draggable, keyboard-operable dividers, px or % limits, snapping collapsible panels and nested groups.
Cards & Containers · React / Tailwind
- D.77clickhoverspringmotion
Collapsible Sidebar
An app sidebar that springs down to an icon rail, with fading labels, rail tooltips, nested groups and a sliding active marker.
Navigation & Menus · 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.107clickpressspringmotion
Context Menu
A right-click and long-press menu with checkbox and radio items, nested submenus, shortcuts, typeahead and full menu ARIA.
Navigation & Menus · React / Motion / Tailwind
- B.70dragkeyboardlayoutmotion
Sortable List
A drag-to-reorder list with a grip handle, lifted rows, layout animations and full keyboard reordering.
Cards & Containers · React / Motion / Tailwind
- F.116clickkeyboardtweenzero deps
Inline Edit
Click-to-edit text that becomes a field without moving a pixel, with async save, revert-on-error and validation.
Forms & Inputs · React / CSS / Tailwind
- F.146keyboardfocusspringmotion
Mention Input
A textarea with @mention and #tag autocomplete at the caret, highlighted tokens and whole-token delete.
Forms & Inputs · React / Motion / Tailwind
- B.129clickkeyboardspringmotion
Product Tour
An onboarding tour that dims the page, springs a spotlight between targets and anchors a step card with collision handling.
Cards & Containers · React / Motion / SVG / Tailwind
- B.98dragpointerspringmotion
Pan & Zoom Canvas
An infinite-feeling canvas: drag to pan with inertia, wheel or pinch to zoom around the cursor, with controls and keys.
Cards & Containers · React / Motion / 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
- A.154clickkeyboardspringmotion
Formatting Toolbar
An ARIA toolbar with toggle buttons, an alignment radio group, a style menu, overflow into “More”, tooltips and scoped shortcuts.
Buttons & Controls · 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
- G.178dragkeyboardzero deps
Gantt Chart
A project timeline with draggable, resizable bars, dependency arrows, milestones, progress and day / week / month zoom.
Data & Feedback · React / SVG / Tailwind
- B.158clickkeyboardspringmotion
Animated Dialog
A native <dialog> modal that scales in from the button that opened it, with a blurred backdrop, alertdialog mode and nesting.
Cards & Containers · React / Motion / Tailwind
- B.188scrollkeyboardtweenzero deps
Virtual List
A windowed listbox that renders only the visible rows of a huge list, with measured variable heights, sticky group headers and scrollToIndex.
Cards & Containers · React / Tailwind
- D.196pointerkeyboardtweenzero deps
Selection Toolbar
A Medium-style toolbar that floats above a text selection inside one container, keeps the selection intact and is reachable with Alt+F10.
Navigation & Menus · React / CSS / Tailwind
- G.207clickkeyboardspringmotion
Event Calendar
A month and week calendar with colour-coded event chips, "+N more" popovers, timed blocks, direction-aware slides and grid keys.
Data & Feedback · React / Motion / Tailwind
- F.205clickkeyboardzero deps
Permission Matrix
A roles × permissions grid with tri-state select-all headers, collapsible groups, locked cells and tracked changes.
Forms & Inputs · React / Tailwind
- F.206dragclickzero deps
Availability Grid
A weekly availability picker: drag to paint or erase time slots, merged ranges, per-day summaries and spreadsheet keys.
Forms & Inputs · React / 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- Kanban Board documentation
- Resizable Panels documentation
- Collapsible Sidebar documentation
- Command Menu documentation
- Context Menu documentation
- Sortable List documentation
- Inline Edit documentation
- Mention Input documentation
- Product Tour documentation
- Pan & Zoom Canvas documentation
- Data Table documentation
- Tree View documentation
- Formatting Toolbar documentation
- Markdown Editor documentation
- Gantt Chart documentation
- Animated Dialog documentation
- Virtual List documentation
- Selection Toolbar documentation
- Event Calendar documentation
- Permission Matrix documentation
- Availability Grid documentation