shadcn.io is not affiliated with official shadcn/ui
Multi-Select Bulk Actions Gallery Block for Solid
Eight drawn scans on shared hairlines, each with a checkbox, a Select all box that shows a mixed state, Shift to take a run, and a bar with Download, Share and an undoable Delete.
Installation
Overview
Select many for Solid with Ark UI, for Scanwick, a document-scanner app. A start-aligned header sits over a band with a "Select all" checkbox, then eight drawn scans (letters, receipts, flyers) on shared hairlines that run from rail to rail: two columns on a phone, four from lg. Each tile carries a checkbox beside its name, and the whole tile is the click target. Hold Shift and tick a second tile to take every scan between it and the last one you touched; Select all turns mixed (a bar, not a tick) while only some are ticked. A bar at the foot, which ends the block, counts what is ticked and offers Download, Share and Delete. Delete leaves a quiet "Removed" cell where each scan was, so the grid keeps its height, and the bar offers Undo. Every action ends with "Nothing is saved in this demo". The scans are drawn in the theme's greys. It's built from Checkbox, Button and Guides.
FAQ
Where do I click to tick a tile?
Anywhere on it. The checkbox's own hit area is stretched over the whole tile (the box is static, so its ::after fills the tile's frame), so the picture and the name both tick it, and the tile gets a ring when it is ticked or holds keyboard focus. The checkbox is still a real checkbox named by the scan's title, with its kind and page count as the description.
How does the Shift range work?
The block remembers the last tile you ticked or cleared. Hold Shift (with a mouse click, or Shift+Space on a focused checkbox) and tick another tile: every tile between the two, in either direction, takes the state of the one you pressed. Tiles that were deleted are skipped. Touch screens have no Shift, so the hint is hidden on phones; tick tiles one by one or use Select all.
How is the mixed state of Select all drawn?
checked="indeterminate" when some but not all scans are ticked, and the catalog Checkbox draws its minus mark.Pressing it ticks every remaining scan; pressing it again clears them.What happens to a deleted scan?
It stays in the grid as a quiet "Removed" cell the size of the tile, with its title, so nothing around it moves and the block keeps its height. Undo delete brings the last batch back, ticked as before. A second delete before you undo replaces what Undo restores.
Is anything saved or sent?
No. Download, Share and Delete only change what the block shows. It all lives in the block's own state and is gone on reload. Each action says "nothing is saved in this demo" in a polite status line; wire the handlers to your own storage or API when you use it.
How do I use my own pictures?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the picture's own so the layout doesn't change. Keep the tile's ratio the picture's own.