shadcn.io is not affiliated with official shadcn/ui
Color-Coded Task List Block for React
A task list in five categories, each a chart-token colour drawn inside its own shape and always followed by its name, with a category picker on the add row and a legend that doubles as the filter.
Installation
Overview
Colour-code a list without making colour the only signal, with this categorised to-do list block for React with Base UI. Five categories, Home, Work, Health, Money and Learning, are each a dot in one of the theme's chart colours drawn inside its own shape (a circle, square, triangle, diamond or hexagon) and always written out beside its name, so a theme with a single hue and a reader who can't tell the colours apart still read every row. The add row has a named group of category pills; the legend band below is also the filter, with a count for each category and the chosen one filled. Rows are Checkboxes named by their title with the category at the end. Clear done removes finished tasks with a one-line Undo, and an Empty state fills a category with nothing left. The Shine Button is the only coloured control, and Guides rule the bands. For personal planners and any list with a handful of fixed kinds.
FAQ
Which colours does it use?
The five chart tokens of your theme, one per category, as a fill on a small SVG shape. They are the only colours in the block, and every other mark is a foreground tone. Change a category's colour by changing its fill class in CATS.
Why a shape as well as a colour?
So the meaning never depends on telling two colours apart. The shape and the name are the signal; the colour is a third, faster cue for people who can use it.
What stays local, and how do I save for real?
Everything. The tasks live in page state and nothing is sent anywhere, so the list resets when you reload. In your app write each change from add, toggle, clearDone and undo to your own store and load the first list from it.