shadcn.io is not affiliated with official shadcn/ui
Color Indicator Table Block for React
A project table whose categories are marked by shape, weight and word, never colour: a circle, square, diamond and triangle in foreground weights, and a legend of toggle chips with counts that dims the other categories.
Installation
Overview
Mark categories so nobody has to tell colours apart, with this color indicator table for React with Base UI. A framed panel holds a native table of nine projects from a design studio (project, category, lead, status and due date). Every category has its own shape and weight: a circle in full foreground, a square at 55 percent, a diamond at 30 and a triangle at 15, each with a solid outline so the lightest still reads, and the word beside it. The marker sits at the start of every row and again in the legend above the table, a Toggle Group of chips that also counts the projects in each category. Pressing chips picks the categories to look at: the other rows are dimmed (a quiet tint and softer text, never removed), the line beside the legend says "4 of 9 projects shown, the rest dimmed", and the table keeps its height. On a phone the legend scrolls sideways and the category moves under each project's name. Status is a word in a Badge with a dot. It's built from Toggle Group, Badge, Avatar and Guides, with a CSS entrance only. For project lists, calendars, issue trackers and any table with categories that colour usually carries.
FAQ
Why shapes and weights instead of colour?
Colour fails for people who can't tell hues apart, in print, and in the many themes a block has to look right in. A shape, a lightness and a word each say the category alone, and together they never depend on one another. The four weights are solid mixes of the foreground over the card, and every shape has a full-strength outline so the 15 percent triangle has a visible edge.
What does pressing a legend chip do?
It adds that category to the ones you are looking at. With none pressed every row is at full strength; once any is pressed, the rows of the other categories are dimmed with a solid 5 percent tint and softer text. Nothing is hidden or removed, so the table keeps its height and you can still read the dimmed rows. Pressing a chip again takes the category back out.
How do the counts and the sentence stay right?
Both are derived from the typed projects: each chip's count is how many projects have that category, and the polite line counts the rows that are not dimmed. It says "All 9 projects shown." when nothing is pressed.
How does it work from the keyboard?
The legend is a group of toggle buttons, each with aria-pressed; Tab reaches the group, the arrow keys move between chips and Space or Enter presses one. In a right-to-left layout the arrows flip so they point the way they move. The pressed chip is a tint with a heavy foreground edge rather than a solid fill, so its shape stays visible.
How does it look on a phone?
The legend becomes a row of chips that scrolls sideways with snapping, the Category and Lead columns go, and each project shows its category and lead as a line under its name next to the marker. The status and due date stay.
What stays local, and how do I add a category?
The nine projects and the four categories are typed in PROJECTS and CATEGORIES. To add a category, give it an id, a label, a shape path in a 14 by 14 box and a foreground weight in fill; the legend, the markers and the counts follow. The chosen categories live in the tab.
Related
- Pro
Chip Filters Table
Sort and searchA bug table beside a rail of chip filters for priority and status: chips in a group are or, the groups are and, every chip counts what it would show, and an empty state clears them all.
- Pro
Tags Table
Rich cellsA note library whose rows carry tag buttons: two show and a plus button opens the rest in a popover, pressing any tag filters the table to the notes that have it, and a strip says Tag and how many of the seven remain.
- Pro
Badge Count Table
Rich cellsModeration queues as counts: compact badges like 1.2K, a quiet dash for zero, a strip of three totals and a number field that flags any queue past a limit with a flag glyph and the words Over limit, never a colour.
- Pro
Effective Priority Table
Rich cellsA ticket queue where a switch raises any ticket due within two days by one level, shown as drawn bars, a word and a raised-from note, and the Priority head sorts by that effective rank.
- Pro
Density Table
Columns and pagingA page list with a three-way density toggle (Compact, Comfortable, Spacious) that sets row height and text size together, in a fixed-height region so the block never changes height, with a line that says what the mode does.
- 1212Pro
Sort Builder Segments Table
Sort and searchA customer segments table ordered by a two-rule sort builder: pick a column and a direction for the first rule and for the tie-break, see the order as a 1 and a 2 on the heads, and Reset to start again.