shadcn.io is not affiliated with official shadcn/ui
No Prompts Empty State Block for React Aria
A prompt library's empty page: a lined editor where any word in double braces becomes a variable with its own value field, an index card that previews the prompt filled in, and a Save prompt button that fills the library's first row.
Installation
Overview
Show an empty prompt library as the editor that fills it, with this no prompts empty state for React with React Aria. A header sits over one framed panel for Cuebrook, a prompt library. The panel's first band is split. At the start a lined Textarea takes a prompt, and any word you wrap in double braces becomes a variable: each is listed under the field as a Badge chip with an Input beside it for its value. At the end an index card previews the prompt with those values filled in; a variable you have not filled stays a dashed slot, and with nothing written the card is a drawn ghost with one dashed slot in it. A band under them is the library, two rows high, with a dashed row where the first prompt will go. The foot holds the Shine Button, the only colored control: Save prompt puts the prompt in the library and clears the editor for the next one. The panel's corners and bands are ruled by Guides, and the whole block uses CSS transitions only. For the empty library of any tool that keeps reusable text with blanks to fill.
FAQ
What happens when I press Save prompt, and what stays in the page?
The prompt's first words and the number of variables go into the page's state and a row appears in the library, then the editor and the values clear. Nothing is saved or sent: reload and the library is empty, and Start over empties it without a reload. To wire it for real, send the text and the variable names to your API where the code says so, and list the prompt that comes back.
How are the variables found?
Any name in double braces, letters, digits and underscores starting with a letter, is a variable; the same name twice is one variable. The list under the field follows what you type, in the order the names first appear, each with its own value field. A name with no value stays a dashed slot in the preview, and a value fills every place that name appears.
What is the preview?
An index card with ruled lines that shows the prompt as it would be sent: plain text as written, filled variables marked with a light tint and unfilled ones as dashed slots. Nothing is sent anywhere; it is the same text with the values swapped in. The card scrolls inside its frame, so a long prompt never changes the panel's height.
Is it usable with a keyboard and a screen reader?
Tab reaches the prompt field, the value fields (each named "Value for" its variable), the card, Save prompt and Start over. Save prompt with an empty editor says so and puts focus back in the field. The status line in the foot says what changed, and the chips, the dashed row and the empty card are decoration hidden from assistive technology.