@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.

23 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://www.prompt-kit.com/c/registry.json

pnpm pnpm dlx shadcn@latest add https://www.prompt-kit.com/c/registry.json

bun bunx shadcn@latest add https://www.prompt-kit.com/c/registry.json

fetch registry curl -s https://www.prompt-kit.com/c/registry.json

Components

23 total

Prompt Input 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 ui

A component to collect user feedback on AI responses.

npx shadcn@latest add https://www.prompt-kit.com/c/feedback-bar.json

Chatbot 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 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