Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

History Prompt AI Block for Ark UI

A prompt box over a Recent prompts list with search, rows grouped Pinned then by day, pin toggles that re-order live, Reuse into the composer, Remove, and a Clear unpinned confirmation.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people get back to a prompt that worked, with this prompt history for React with Ark UI. A Textarea is the composer, and under it a Collapsible band, "Recent prompts (8)", is open on load. It holds a search Input that filters the list ("3 of 8") and rows grouped Pinned first and then by day ("9 Oct", "8 Oct"), each showing the prompt in two lines with a category word. A pin Toggle re-orders the list at once, Reuse fills the composer and moves focus into it so you can edit before sending, and Remove drops the row. "Clear unpinned" asks in an Alert Dialog first, and once the list is empty an Empty state offers "Restore the samples". The list is a held-height scroll region, so nothing moves the panel. The Shine Button sends, the only colored control. For prompt notebooks, chat apps and any tool people return to.

FAQ

Where is the history kept, and how do I wire it for real?

In this tab only; reloading brings the eight typed samples back, and nothing is sent ("Request ready. Nothing was sent: this demo has no model."). To make it real, store each sent prompt with its day, category and pinned flag on your server, load them into SAMPLES' shape, and call your API from the pin, remove and clear handlers.

How is the list ordered?

Pinned prompts come first, newest first, then the rest are grouped by day, newest first. Pinning or unpinning moves the row at once and the status line says where it went; focus stays on that row's pin button so the keyboard does not lose its place.

What does Clear unpinned do?

It opens a confirmation that says how many prompts will go and that pinned ones stay. Confirming removes the unpinned rows; cancelling changes nothing. If nothing is unpinned the dialog says so. Remove on a single row asks nothing, and the empty state then offers to restore the samples.

How does it work from the keyboard?

Enter in the composer sends and Shift+Enter breaks the line; ArrowUp recall is left to the command-style prompt box. The Recent prompts band is a disclosure button, every row has a pin toggle, a Reuse button and a Remove button named for the prompt, and after Reuse focus moves to the composer.

Does it work in a right-to-left language?

Yes. Each prompt follows its own direction, the dates and the "3 of 8" count keep their order, and the buttons sit on the logical end of the row.

How does it look on a phone?

Each row stacks: the prompt and its category with the day on the second line, then the three buttons underneath. The search field and Clear unpinned wrap, and the list keeps its height.

All 100 ai blocks