Inputs

Prompt Library

Prompt template library for React and shadcn/ui to browse, search, insert, and save AI prompts by category from a popover.

Updated Oct 1, 2026

Browse and insert prompt templates. Click a prompt to copy it to clipboard, or pass onInsert to put it straight into your input.

Prompt Library is a composable React component for shadcn/ui built on shadcn Command, Popover, Dialog, and Hover Card. Use it beside AI chat inputs so users can reuse saved prompts instead of retyping them.

Installation


pnpm dlx shadcn@latest add @cult-ui/prompt-library

Usage

Use PromptLibrary with prompts, onPromptsChange, and onSelect. Compose PromptLibraryTrigger, PromptLibraryContent (with PromptLibrarySearch, PromptLibraryList, PromptLibraryEmpty, PromptLibraryGroup, PromptLibraryItem), PromptLibraryFooter, PromptLibraryCreateTrigger, and PromptLibraryCreateDialog for the full experience.

Basic example


import { useState } from "react"
 
import {
  PromptLibrary,
  PromptLibraryContent,
  PromptLibraryCreateDialog,
  PromptLibraryCreateTrigger,
  PromptLibraryEmpty,
  PromptLibraryFooter,
  PromptLibraryGroup,
  PromptLibraryItem,
  PromptLibraryList,
  PromptLibrarySearch,
  PromptLibraryTrigger,
  type Prompt,
} from "@/registry/default/ui/prompt-library"
 
const prompts: Prompt[] = [
  {
    id: "code-review",
    title: "Code Review",
    description: "Review code for best practices",
    prompt: "Please review this code for best practices and potential issues.",
    category: "Development",
  },
]
 
export default function Example() {
  const [promptsState, setPromptsState] = useState(prompts)
  const [lastSelected, setLastSelected] = useState<Prompt | null>(null)
 
  return (
    <PromptLibrary
      prompts={promptsState}
      onPromptsChange={setPromptsState}
      onSelect={setLastSelected}
    >
      <PromptLibraryTrigger />
      <PromptLibraryContent>
        <PromptLibrarySearch />
        <PromptLibraryList>
          <PromptLibraryEmpty />
          <PromptLibraryGroup heading="Development">
            {promptsState
              .filter((p) => p.category === "Development")
              .map((prompt) => (
                <PromptLibraryItem key={prompt.id} prompt={prompt} />
              ))}
          </PromptLibraryGroup>
        </PromptLibraryList>
        <PromptLibraryFooter>
          <PromptLibraryCreateTrigger />
        </PromptLibraryFooter>
      </PromptLibraryContent>
      <PromptLibraryCreateDialog />
    </PromptLibrary>
  )
}

With AI Elements PromptInput

Pass onInsert to put the selected prompt into your chat input instead of the clipboard. With AI Elements, read the controller inside PromptInputProvider:


import { usePromptInputController } from "@/components/ai-elements/prompt-input"
 
function PromptPicker() {
  const controller = usePromptInputController()
 
  return (
    <PromptLibrary onInsert={controller.textInput.setInput}>
      {/* trigger and content */}
    </PromptLibrary>
  )
}

Features

Categories: Group prompts with PromptLibraryGroup and optional heading
Custom prompts: Add and remove custom prompts via onPromptsChange, PromptLibraryCreateTrigger, and PromptLibraryCreateDialog
Copy or insert: Selecting a prompt copies it to the clipboard, or calls onInsert with the prompt text when you pass it
Search: PromptLibrarySearch filters the list
Compound API: PromptLibrary, PromptLibraryTrigger, PromptLibraryContent, PromptLibrarySearch, PromptLibraryList, PromptLibraryEmpty, PromptLibraryGroup, PromptLibraryItem, PromptLibraryFooter, PromptLibraryCreateTrigger, PromptLibraryCreateDialog