Prompt Library Page

A full-page layout for managing a prompt library. Features a category sidebar, live search filter, a responsive prompt card grid with insert, copy, edit, and delete actions, and a dialog for creating or editing prompts.

Explain like I'm 5

Simplify complex topics

simple

explain

Code review checklist

Review code for quality and issues

code

review

Blog post outline

Create a structured blog post

blog

content

Email draft

Write professional emails

professional

SQL query helper

Generate SQL queries

sql

database

import { PromptLibraryPage } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add prompt-library-page

Import

import.tsx

import { PromptLibraryPage } from "@aetherstack/blocks"

Usage

prompt-library-page.tsx

"use client"

import * as React from "react"
import { PromptLibraryPage } from "@aetherstack/blocks"

const initialPrompts = [
  {
    id: "1",
    title: "Explain like I'm 5",
    description: "Simplify complex topics",
    content: "Explain the following in simple terms: {{topic}}",
    category: "Education",
    tags: ["explain"],
  },
  {
    id: "2",
    title: "Code review",
    description: "Review code for quality",
    content: "Review the following code: {{code}}",
    category: "Development",
    tags: ["code"],
  },
]

export function MyPromptLibrary() {
  const [prompts, setPrompts] = React.useState(initialPrompts)

  return (
    <PromptLibraryPage
      prompts={prompts}
      categories={["Education", "Development"]}
      onInsert={(content) => console.log("Insert:", content)}
      onSave={(newPrompt) =>
        setPrompts((prev) => [
          ...prev,
          { ...newPrompt, id: String(Date.now()), tags: newPrompt.tags ?? [] },
        ])
      }
      onDelete={(id) =>
        setPrompts((prev) => prev.filter((p) => p.id !== id))
      }
    />
  )
}

Props

Prop	Type	Default	Description
prompts*	Prompt[]	—	Array of prompt objects to display in the grid.
categories	string[]	[]	Explicit category list for the sidebar. If omitted, categories are inferred from the prompts.
onInsert	(content: string) => void	—	Called when the Insert button on a prompt card is clicked. Omit to hide the button.
onSave	(prompt: NewPrompt) => void	—	Called when the create/edit dialog is saved. Omit to hide the New prompt button and edit action.
onDelete	(id: string) => void	—	Called when the delete button on a card is clicked. Omit to hide the button.
className	string	—	Additional classes on the root element.

* Required

Accessibility

→Category sidebar buttons convey active state via background color and are keyboard-focusable.
→The search input has an accessible label provided by the Search icon's implicit visual context; add an aria-label for screen-reader-only scenarios.
→The create/edit dialog is built on the Dialog primitive with role='dialog' and a labelled title.
→Copy and delete icon buttons include aria-label attributes.