Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Library Prompt AI Block for Radix UI

A shelf of saved prompts with category counts, search, a sort, favourite and copy buttons on each row, and a Selected band that places the chosen prompt in a one-line composer.

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

Give a team a shelf of prompts worth reusing, with this prompt library for React with Radix UI. Categories (All, Writing, Code, Analysis, Support and Favourites) sit at the start with a live count each, and become a Native Select on a phone. A search Input and a sort (Most used, A to Z) sit above rows that each show a title, a one-line description, tags as Badges and how often the team used it. Each row has a favourite Toggle that moves it into the Favourites count at once and a Copy Button that puts the real text on the clipboard. Choosing a row fills the Selected band with its full text, and the Shine Button, "Use in composer", places it in a one-line composer you can edit. The list is a held-height scroll region, so filtering never moves the panel. It's built from Input, Native Select, Toggle, Copy Button, Badge, Empty, Button, Shine Button and Guides, with a CSS entrance only. For team workspaces, prompt shelves and any app that keeps good prompts.

FAQ

What stays local, and how do I wire it for real?

Everything. The eight prompts, their tags and their counts of use are typed example figures at the top of the file, favourites live in this tab only, and "Use in composer" fills a field that sends nothing ("Ready to send. Nothing is sent: this demo has no model."). To make it real, load the prompts from your API, save the favourite and the use count on the server when the toggle or the composer fires, and send the composer's text where the status line is.

How do I add a prompt or a category?

Add an entry to PROMPTS with a title, a description, tags, the text and a category value, and add the category to CATEGORIES if it is new. The counts, the list, the sort and the phone select are all worked out from those two arrays, and Favourites is derived from the favourite list, so nothing is typed twice.

What does the copy button copy?

The prompt's full text, not the title or the description. It copies to the clipboard where the browser allows it, and the button announces "copied" to a screen reader. Copying does not select the row; pressing the title does.

How does it work from the keyboard?

The category list is a radio group, so the arrow keys move through it. Each row's title is a button that selects it and marks it current, and the favourite and copy buttons are named for their prompt ("Favourite Review this diff"). Search and sort are labelled fields. The list scrolls inside its own box, and Tab walks the rows in order.

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

Yes. Titles, tags and counts keep their own order inside right-to-left text, the quoted prompt follows its own direction, and the search icon, the row layout and the category counts sit on the logical sides.

How does it look on a phone?

The category list becomes a select above the search field, with the same counts in its options. The rows keep their title, description, tags and buttons, the list keeps its height, and the Selected band follows with the composer under it.

All 100 ai blocks