AI Prompt Gallery
AI
Wayfinder
Block
Sample prompt showcase combining gallery, nudges, and randomize features. Helps users discover and start with prompt examples.
Card Variant
Full card with search, categories, nudges, and gallery
Prompt Gallery
8 examples to get you started
Quick start
Grid Variant
Two-column grid with category filters
Prompt Gallery
Carousel Variant
Horizontally scrollable nudges and prompt cards
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
items* | GalleryItem[] | — | Gallery prompt examples |
nudges | NudgeItem[] | — | Quick nudge suggestions for new users |
variant | 'card' | 'grid' | 'carousel' | 'card' | Display variant |
onSelectPrompt | (prompt: string) => void | — | Callback when a prompt is selected |
onRandomize | () => void | — | Custom randomize callback |
onSelectNudge | (nudgeId: string) => void | — | Callback when a nudge is selected |
showSearch | boolean | true | Show the search bar |
showRandomize | boolean | true | Show randomize button |
maxVisible | number | 6 | Max items before "Show more" |
Consolidation Note
Covers three AI UX patterns
Consolidated Component
This component consolidates three related wayfinder patterns: Gallery (sample generations showcase), Nudges (action prompts for new users), and Randomize (random prompt starter) into a single discovery-oriented component.
Usage
Import and examples
import { AIPromptGallery } from '@/blocks/ai-conversation/ai-prompt-gallery'
<AIPromptGallery items={[ { id: '1', title: 'Write a blog', prompt: 'Write a blog post about...', category: 'Writing' }, { id: '2', title: 'Debug code', prompt: 'Help me debug...', category: 'Coding' }, ]} nudges={[ { id: 'write', text: 'Help me write', icon: PenTool }, ]} onSelectPrompt={(prompt) => setInput(prompt)} onSelectNudge={(id) => handleNudge(id)}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Search: Filter prompts by title, content, or tags
- Category filtering: Auto-derived or custom categories
- Nudges: Quick-start action buttons for new users
- Randomize: Surprise me button picks random prompt
- Tags: Visual tags for prompt categorization
- Show more: Pagination with configurable max visible
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Prompt cards are focusable buttonsSearch input has placeholder textKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between prompts and controls |
| Enter / Space | Select prompt or nudge |
Notes
- New and featured items have visual indicators
- Empty state message when no results