Bulk selection
Selecting many rows at once: shift-click selects a range, neighbouring picks join into one band, and the hint at the foot gives way to an action bar whose count rolls as the selection grows.
Files 6SizeEdited
⇧ Shift-click to select a range
Things to try
- Tick a row, then shift-click another. Everything between is selected, and neighbouring picks join into one band.
- Watch the header box. It shows when some or all of the rows are selected.
- Look at the foot. The hint gives way to an action bar whose count rolls as the selection grows.
- Delete. The chosen rows fold away one after another, and the bar offers Undo.
Install
npx shadcn@latest add https://your-docs-site/r/bulk-select.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react @tanstack/react-table motionHow it works
- TanStack Table models it.
useReactTableholds the columns, the row model and row selection, so select-all, the header's mixed state and each row's checkbox read from one selection. Swap in your own data and columns and the rest keeps working. - Base UI draws the controls. The checkboxes are Base UI's Checkbox, and the action bar's buttons have Base UI tooltips.
- Motion moves it. The joined bands, the rolling count and the rows folding away are Motion.
The files are made up.
Booking steps
Booking a hospital appointment, where every choice becomes part of the booking. The option you pick fills in and flies up into the summary; tap it there to change it and it flies back down.
Command palette
A command palette that grows out of its search pill, keeps results in place as you type, turns a scope into a chip in the field, and folds back into a pill that says what you did.