---
name: "@prompt-kit"
slug: "prompt-kit"
description: "prompt-kit is an open-source shadcn-compatible registry of ~20 components purpose-built for AI interfaces: PromptInput, PromptSuggestion, ChatContainer, Message, SystemMessage, Reasoning, ThinkingBar, CodeBlock, Markdown, FileUpload, ImageLoader, ChainOfThought, ToolBlocks, Steps, ScrollButton, FeedbackBar, TextShimmer, SourceCard. Built on top of shadcn/ui with Tailwind CSS, integrates with Vercel AI SDK and OpenAI SDK. Fully free and open-source. Use for: rapidly assembling chat UIs, AI agent dashboards, or assistant frontends without wiring low-level input and message components from scratch."
category: "AI/chat UI"
tags: ["accessibility", "ai", "blocks", "buttons", "cards", "dashboard", "forms", "loaders", "media", "text-effects"]
framework: "react"
license: "MIT"
author: "ibelick"
website: "https://www.prompt-kit.com"
github: "https://github.com/ibelick/prompt-kit"
registry: "https://www.prompt-kit.com/c/registry.json"
pro: false
pro_url: null
github_stars: 2906
component_count: 23
generated_at: "2026-07-28T08:59:05.895Z"
---

# @prompt-kit

prompt-kit is an open-source shadcn-compatible registry of ~20 components purpose-built for AI interfaces: PromptInput, PromptSuggestion, ChatContainer, Message, SystemMessage, Reasoning, ThinkingBar, CodeBlock, Markdown, FileUpload, ImageLoader, ChainOfThought, ToolBlocks, Steps, ScrollButton, FeedbackBar, TextShimmer, SourceCard. Built on top of shadcn/ui with Tailwind CSS, integrates with Vercel AI SDK and OpenAI SDK. Fully free and open-source. Use for: rapidly assembling chat UIs, AI agent dashboards, or assistant frontends without wiring low-level input and message components from scratch.

## Links

- Website: https://www.prompt-kit.com
- GitHub: https://github.com/ibelick/prompt-kit
- Registry JSON: https://www.prompt-kit.com/c/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/prompt-kit
- This file: https://sh4dcn.vercel.app/md/prompt-kit.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.prompt-kit.com/c/registry.json
pnpm dlx shadcn@latest add https://www.prompt-kit.com/c/registry.json
bunx shadcn@latest add https://www.prompt-kit.com/c/registry.json
# clone the source repo
git clone https://github.com/ibelick/prompt-kit.git
# fetch the raw registry index
curl -s https://www.prompt-kit.com/c/registry.json
```

## Components (23)

| name | type | description | install |
| --- | --- | --- | --- |
| prompt-input | registry:ui | An input field designed for chat interfaces, allowing users to enter and submit text prompts to an AI model | `npx shadcn@latest add https://www.prompt-kit.com/c/prompt-input.json` |
| code-block | registry:ui | A component for displaying code snippets with syntax highlighting and customizable styling | `npx shadcn@latest add https://www.prompt-kit.com/c/code-block.json` |
| markdown | registry:ui | A component for rendering Markdown content with support for code blocks, GFM, and custom styling | `npx shadcn@latest add https://www.prompt-kit.com/c/markdown.json` |
| message | registry:ui | A component for displaying chat messages with support for avatars, markdown content, and interactive actions | `npx shadcn@latest add https://www.prompt-kit.com/c/message.json` |
| chat-container | registry:ui | A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth and responsive user experience | `npx shadcn@latest add https://www.prompt-kit.com/c/chat-container.json` |
| scroll-button | registry:ui | A floating button component that appears when users scroll up in a container, allowing them to quickly return to the bottom of the content | `npx shadcn@latest add https://www.prompt-kit.com/c/scroll-button.json` |
| loader | registry:ui | A component for displaying a loading indicator with multiple variants and customizable styling | `npx shadcn@latest add https://www.prompt-kit.com/c/loader.json` |
| prompt-suggestion | registry:ui | A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes: Normal Mode and Highlig… | `npx shadcn@latest add https://www.prompt-kit.com/c/prompt-suggestion.json` |
| response-stream | registry:ui | A component to simulate streaming text on the client side, perfect for fake responses, or any controlled progressive text display. | `npx shadcn@latest add https://www.prompt-kit.com/c/response-stream.json` |
| reasoning | registry:ui | A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is su… | `npx shadcn@latest add https://www.prompt-kit.com/c/reasoning.json` |
| file-upload | registry:ui | A component for creating drag-and-drop file upload interfaces with support for single or multiple files, custom triggers, and visual feedback during file dragg… | `npx shadcn@latest add https://www.prompt-kit.com/c/file-upload.json` |
| jsx-preview | registry:ui | A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion. | `npx shadcn@latest add https://www.prompt-kit.com/c/jsx-preview.json` |
| tool | registry:ui | Displays tool call details including input, output, status, and errors. Ideal for visualizing AI tool usage in chat UIs. | `npx shadcn@latest add https://www.prompt-kit.com/c/tool.json` |
| source | registry:ui | Displays website sources used by AI-generated content, showing URL details, titles, and descriptions on hover. | `npx shadcn@latest add https://www.prompt-kit.com/c/source.json` |
| image | registry:ui | A component for displaying images from base64 or Uint8Array data, with full accessibility and responsive styling. Perfect for AI-generated or user-uploaded ima… | `npx shadcn@latest add https://www.prompt-kit.com/c/image.json` |
| steps | registry:ui | A component for displaying a sequence of operations in a collapsible layout. Each step can include details and an optional vertical bar. Useful for showing AI … | `npx shadcn@latest add https://www.prompt-kit.com/c/steps.json` |
| system-message | registry:ui | A banner-style component for surfacing contextual information, warnings, or instructions within AI interfaces. | `npx shadcn@latest add https://www.prompt-kit.com/c/system-message.json` |
| chain-of-thought | registry:ui | A component for displaying a chain of thought process with collapsible steps and triggers. | `npx shadcn@latest add https://www.prompt-kit.com/c/chain-of-thought.json` |
| text-shimmer | registry:ui | A component for displaying a shimmer effect on text, perfect for loading states or highlighting text. | `npx shadcn@latest add https://www.prompt-kit.com/c/text-shimmer.json` |
| thinking-bar | registry:ui | A component to display the thinking state of an AI model with optional actions. | `npx shadcn@latest add https://www.prompt-kit.com/c/thinking-bar.json` |
| feedback-bar | registry:ui | A component to collect user feedback on AI responses. | `npx shadcn@latest add https://www.prompt-kit.com/c/feedback-bar.json` |
| chatbot | registry:item | A chatbot component that allows users to chat with an AI model. It uses prompt-kit, shadcn/ui, and AI SDK V5. | `npx shadcn@latest add https://www.prompt-kit.com/c/chatbot.json` |
| tool-calling | registry:item | A chatbot with tool calling feature. It uses prompt-kit, shadcn/ui, and AI SDK V5. | `npx shadcn@latest add https://www.prompt-kit.com/c/tool-calling.json` |

## For AI agents

```text
You are adding components from @prompt-kit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/prompt-kit.md) for the component list.
2. Fetch the machine-readable index: https://www.prompt-kit.com/c/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: prompt-kit).
```