shadcn.io is not affiliated with official shadcn/ui
Tag Categorize File Upload Block for Solid
A tagging desk for a stock-image library: a rail of tags with counts and an All or Any choice that filter the files, with an expanding Tags row per file to remove, suggest and add tags, and Add files in the top bar.
Installation
Overview
Keep a library findable by letting people tag and filter in one place, with this tag categorize window for Solid with Ark UI. It is the tag desk of Tagyard, a stock-image library, drawn as an app window. A rail holds a Toggle Group of tags, each with how many files carry it, and a Segment Group that decides whether the files must match All the picked tags or Any of them (on a phone the tags are a row of chips that scrolls sideways). The files are rows with a drawn thumbnail, their size and their tag Badges; a Tags button opens, as a Collapsible, a row where you remove a tag, press a suggestion or type a new one. Every change re-counts the rail and re-filters the list. Add files, the Shine Button in the top bar, opens the File Upload picker and lists each picked image untagged. The window is ruled by Guides. For stock libraries, asset managers and any collection that lives by its tags.
FAQ
What is the difference between All and Any?
All keeps only files that have every picked tag, so each tag you add narrows the list. Any keeps files that have at least one, so each tag widens it. With nothing picked you see every file. The line above the list says how many match.
Why do the counts change when I tag a file?
They are worked out from the files, not typed: add coast to a file and coast goes up by one, remove the last file's tag and the count reaches 0 but stays in the rail while it is picked, so your filter never disappears under you.
What counts as a valid tag?
Two to twenty-four characters; letters, numbers and hyphens, lower-cased, with spaces turned into hyphens. A file holds at most five tags and a tag cannot repeat. A problem is shown in a reserved line under the field and the field keeps focus; Enter adds the tag.
Does Add files read my images?
No. The picker accepts images up to 25 MB and the block lists each by name and size with no tags. Anything else is refused with a short note. Nothing is uploaded and no file is opened.
Does the window change size when I filter?
No. It has a fixed height; only the file list scrolls, and a filter with no match shows an empty state in the same box with a button to clear the tags.
What stays local, and how do I wire it?
The images, tags and suggestions are typed in the file and edited in the page. To wire it, load the files and their tags from your API, save a tag change from the add and remove handlers, and take the suggestions from your own vocabulary so the library does not drift into near-duplicates.