Prompt Library Block React component
A library of reusable AI prompts: categories, search, popular, recent and favorite sorting, cards that highlight {{variables}}, a side panel that builds a form from those variables with a live preview, Copy and Use in chat, and a New prompt form that finds variables as you type.
About the Prompt Library Block component
Prompt Library Block is a shared shelf of prompts that work. Each card shows the category, a short description and the start of the prompt, with fill-in fields like {{audience}} or {{code}} highlighted so you can see at a glance what you need to provide.
Open a prompt and the block builds a small form from its fields. As you type, the preview fills in, then you copy the finished prompt or send it straight to your chat. Star the ones you use most, sort by popular or recent, and add your own with a form that spots fields as you type them.
When to use it
Use it inside an AI product as a template gallery, in an internal tool to share prompts across a team, or on a resource page for your users.
Name fields in plain words, such as {{product}} or {{audience}}; they become the form labels.
Installation
Add the Prompt Library Block component to your project with the shadcn CLI. It lands in components/prompt-library.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/prompt-libraryOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<PromptLibrary /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Prompt library" |
| prompts | { id: string; title: string; category: string; description?: string; body: string; uses?: number; author?: string; created?: number }[] | — |
| categories | string[] | — |
| onUse Called with the filled prompt when someone presses Use in chat. | (text: string, prompt: PromptItem) => void | — |
| onCreate | (prompt: PromptItem) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Prompt library"
- prompts{ id: string; title: string; category: string; description?: string; body: string; uses?: number; author?: string; created?: number }[]
- categoriesstring[]
- onUse
Called with the filled prompt when someone presses Use in chat.
(text: string, prompt: PromptItem) => void - onCreate(prompt: PromptItem) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Prompt Library Block FAQ
- How are the form fields made?
- Every {{name}} in a prompt body becomes a field. Names like text, code, notes, message and tickets get a multi-line box; the rest get a single line. Underscores become spaces in the label.
- What does Use in chat do?
- It calls onUse with the filled prompt and the prompt object, bumps its use count and closes the panel. Put the text into your chat input from there.
- Are favorites and new prompts saved?
- They live in component state. Save them with onCreate and your own favorites storage, or pass prompts from your database.
- What happens to fields left empty?
- They stay as {{name}} in the copied text, so the person or the model can see what is missing.
- Is it accessible?
- The panel is a modal dialog with a label, Escape closes it and focus returns to the card. Categories are a nav, the sort is a radiogroup, stars are toggle buttons with names and the preview updates politely for screen readers.
