Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Templates Prompt AI Block for React

Eight prompt templates in Email, Product, Research and Code groups, a form with a field per variable, the finished prompt with filled values highlighted and missing ones dashed, and a Copy prompt button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Turn a good prompt into a form, with these prompt templates for React with Base UI. Eight templates in four groups, Email, Product, Research and Code, sit at the start as a radio list (a Native Select on a phone). The chosen one shows a form with an Input for each {{variable}} and the prompt as it will be copied: filled values in a highlight, missing ones as dashed placeholders that screen readers read as "Missing: audience". A Progress bar reads "3 of 4 filled", "Fill from last time" puts in typed values, and the Shine Button, "Copy prompt", copies the real filled text and refuses while a blank is open, saying which. The blanks keep their place, so the form never changes height. For prompt kits, email tools and any app that reuses a well-made prompt.

FAQ

What stays local?

Everything. The substitution is a small function in the file; the values you type stay in this tab, one set per template, and the "last time" values are typed for the demo. Copy prompt writes the filled text to your clipboard and nothing else is sent. To make it real, store each person's last values on your server and send the finished prompt to your model.

How do I add a template?

Add an entry to TEMPLATES with a title, a category, the body with {{key}} markers and one blank per key (a label and a typed earlier value). The list, the form, the progress bar and the prompt are read from it. A template with more than four blanks needs a fifth slot in slotsOf.

What exactly is copied, and when is it refused?

The body with every marker replaced by its value, exactly as the prompt box shows it. While any blank is empty the button is inactive and its press says "Fill recipient first" (naming the open blanks) instead of copying a half-made prompt.

How does it work from the keyboard?

The templates are one radio group, so the arrow keys move through all eight across the group headings. Each blank is a labelled field, "Fill from last time" and Copy prompt are buttons, and the status line reads out what happened.

Does it work in a right-to-left language?

Yes. The prompt and the fields follow their own direction and the counts keep their order; the highlight and the dashed placeholders sit inline in the text.

How does it look on a phone?

The template list becomes a select above the title, the fields stack in one column with a reserved fourth slot so the height holds, and the prompt and the Copy prompt button follow.

All 100 ai blocks