Prompt Library

A searchable, filterable library of reusable prompts. Each prompt shows a title, optional description, and category tags. Users can insert a prompt into the active input or copy it to the clipboard. Supports category filter buttons for quick browsing.

Code Review

Review code for issues

code

Explain Code

Get an explanation

code

learning

Write Tests

Generate unit tests

testing

Summarize

Summarize content

summary

Translate

Translate text

translation

import { PromptLibrary } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add prompt-library

Import

import.tsx

import { PromptLibrary } from "@aetherstack/patterns"

Usage

prompt-library.tsx

import * as React from "react"
import { PromptLibrary } from "@aetherstack/patterns"

const prompts = [
  {
    id: "1",
    title: "Code Review",
    description: "Review code for bugs and improvements",
    content: "Please review this code for bugs and improvements:",
    category: "Development",
    tags: ["code"],
  },
  {
    id: "2",
    title: "Summarize",
    description: "Summarize content into bullet points",
    content: "Please summarize the following in 3 bullet points:",
    category: "Writing",
    tags: ["summary"],
  },
]

export function MyPromptLibrary() {
  return (
    <PromptLibrary
      prompts={prompts}
      categories={["Development", "Writing"]}
      onInsert={(content) => setInputValue(content)}
      onCopy={(content) => navigator.clipboard.writeText(content)}
    />
  )
}

Props

Prop	Type	Default	Description
prompts*	Prompt[]	—	Array of prompt items to display. Each item requires id, title, and content.
categories	string[]	—	Category names rendered as filter buttons above the prompt list.
onInsert	(content: string) => void	—	Called with the prompt content when the user clicks Insert.
onCopy	(content: string) => void	—	Called with the prompt content when the user clicks Copy.
className	string	—	Additional CSS classes applied to the root container.

* Required

Accessibility

→Category filter buttons use aria-pressed to indicate the active filter state.
→The search input includes an aria-label for screen reader context.
→Insert and Copy buttons include the prompt title in their aria-label for unambiguous identification.