shadcn.io is not affiliated with official shadcn/ui
Tagged Task List Block for React
A task list with a column of tags and counts you can tick together, a Match any or all switch, a title search, outline tag badges on each row, and a Tags picker that edits a row's tags and coins new ones.
Installation
Overview
Sort a busy list by what each task is for, with this tagged to-do list block for React with Base UI. A column at the start lists every tag as a pill with the number of tasks that carry it; tick one or several, then choose with a Match switch whether a task needs any of them or all of them. An Input search narrows the list by title on top of that. Each row shows its tags as outline Badges and has a Tags Popover where you tick up to three tags for that task or type a new one, which then joins the column. The foot says exactly what is showing, "Showing 2 of 8: work or urgent", and clears the filters; an Empty state with a way back appears when nothing matches. The Shine Button adds a task with the tags currently ticked. On a phone the tag column becomes a row that scrolls sideways. For task apps, inboxes and any list where one item has several labels.
FAQ
What do Match any and Match all do?
With Any, a task shows if it has at least one of the ticked tags; with All, it must have every one of them. With no tag ticked every task passes, and the search then narrows by title. The foot spells the rule out ("work and urgent" or "work or urgent").
Why only three tags per task?
Three keeps rows to one line of badges. The picker disables the unticked tags once a task has three and says so in its heading ("Tags, 3 of 3"). Raise MAX_TAGS if you want more.
What can a new tag be called?
Two to sixteen lowercase letters, digits or hyphens. Anything else shows a message under the field, and a name that already exists is simply applied. A coined tag joins the column and its count.