shadcn.io is not affiliated with official shadcn/ui
No Tags Empty State Block for Solid
A tagging tool with no tags: a Tags popover drawn open over a list of items, a string with three tags hung on it, a name field and four patterns (solid, dashed, dotted, hatched) that tell tags apart without colour, and one Create tag button.
Installation
Overview
Show an empty tag list with the one popover that fills it, with this no tags empty state for Solid with Ark UI. A header holds the real Tags button for Tagtether, a labelling tool. Under it a stage draws a list of three items, the first with a dashed chip where its first tag will go, and drawn open in place beside a twin of that button is the app's popover card: a string with three tags hung on it, the last only dashed, an Input for the tag's name and a Toggle Group of four patterns, solid, dashed, dotted and hatched, so tags are told apart by pattern and never by colour. A preview chip shows the name in the chosen pattern. The Shine Button, the only colored control, creates the tag, and so does Enter in the field: the chip appears on the item behind the card and the dashed tag on the string turns solid. The frame's corners come from Guides, and the whole block uses CSS transitions only. Shown open in place for the preview; in your app keep the Popover and drop the in-place copy.
FAQ
What happens when I press Create tag, and what stays in the page?
The tag goes into the page's state and is applied to the first item: its chip, drawn in the chosen pattern, appears on the item behind the card and the status line says so. Nothing is saved: reload and the list is empty again, and Start over clears it without a reload. To wire it for real, send the name and the pattern to your API where the code says so and list what comes back.
Why patterns instead of colours?
Colour alone cannot carry meaning for everyone and drops out in a greyscale theme, so each tag has a name and a pattern: a solid fill, a dashed edge, a dotted edge or diagonal hatching. The patterns are literal classes in one typed list, so adding a fifth is one entry.
What part is the preview's, and what is real?
On load the card is drawn in place on the stage so the page does not trap or move focus. The Tags button opens the real, non-modal Popover (Escape closes it and focus goes back to the button) and the in-place copy stays closed until a reload. Both share one form and the page's state, so what you typed in place is there in the real card. In your app keep the Popover and delete the in-place copy.