shadcn.io is not affiliated with official shadcn/ui
No Tags Empty State Block for React
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 React with Base 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.
Related
- Pro
A catalog tool with no categories: one field for a path such as Clothing / Shoes / Boots, a tree of boxes under All categories that grows as you type with dashed boxes for what is new, and one Add category button.
- Pro
A custom fields page with none yet: a row of five field types, a label input with a live drawing of the control, and a sketch of the contact form where each added field fills the next dashed slot.
- Pro
No Reminders Empty State
Calendar and timeA reminders app with nothing set: a Remind me popover drawn open over a note with three empty slots, an hourglass whose sand has not fallen, a field and three presets that write a day and time, and one Set reminder button.
- Pro
Connect Tools Empty State
Apps and integrationsA full-height first-run screen for an integration hub: six tool cards with checkboxes at the end, and at the start a drawn hub whose spokes turn from dashed to solid, and whose sockets take a lettermark, as each tool is ticked.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- Pro
Getting Started Empty State
First runA getting-started card for an empty dashboard: four setup steps as real checkboxes, a headline that counts down with a progress bar, and a drawn trail up a hill with a flag that stands at the done count.