---
name: "@scrimui"
slug: "scrimui"
description: "Free, open-source React components and patterns for AI interfaces, including prompts, streaming messages, reasoning, tool calls, citations, agents, memory, voice, and safety."
category: "AI/chat UI"
tags: ["ai", "audio", "buttons", "cards", "dashboard", "editor", "forms", "media", "overlays", "pro-available"]
framework: "react"
license: "MIT"
author: "jackyrwj"
website: "https://scrimui.dev"
github: "https://github.com/jackyrwj/scrim-ui"
registry: "https://scrimui.dev/r/registry.json"
pro: true
pro_url: "https://scrimui.dev/pro"
github_stars: 2
component_count: 68
generated_at: "2026-09-05T09:50:59.044Z"
---

# @scrimui

Free, open-source React components and patterns for AI interfaces, including prompts, streaming messages, reasoning, tool calls, citations, agents, memory, voice, and safety.

## Links

- Website: https://scrimui.dev
- GitHub: https://github.com/jackyrwj/scrim-ui
- Registry JSON: https://scrimui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/scrimui
- This file: https://sh4dcn.vercel.app/md/scrimui.md
- Pro / pricing: https://scrimui.dev/pro

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://scrimui.dev/r/registry.json
pnpm dlx shadcn@latest add https://scrimui.dev/r/registry.json
bunx shadcn@latest add https://scrimui.dev/r/registry.json
# clone the source repo
git clone https://github.com/jackyrwj/scrim-ui.git
# fetch the raw registry index
curl -s https://scrimui.dev/r/registry.json
```

## Components (68)

| name | type | description | install |
| --- | --- | --- | --- |
| all | registry:block | Every free Scrim UI component — 55 in total, from prompt inputs and streaming messages to tool calls and citations. | `npx shadcn@latest add https://scrimui.dev/r/all.json` |
| prompt-input | registry:ui | The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop. | `npx shadcn@latest add https://scrimui.dev/r/prompt-input.json` |
| prompt-input-attachments | registry:ui | A chat input that accepts file uploads — attachment chips with upload progress, type icons, and one-click removal. | `npx shadcn@latest add https://scrimui.dev/r/prompt-input-attachments.json` |
| prompt-input-model-selector | registry:ui | A chat input with the model picker built in — switch models inline, with badges for what each one can do. | `npx shadcn@latest add https://scrimui.dev/r/prompt-input-model-selector.json` |
| prompt-editor | registry:ui | A prompt template editor with {{variables}} highlighted as you type, a rendered preview, and a line diff against the previous version. | `npx shadcn@latest add https://scrimui.dev/r/prompt-editor.json` |
| streaming-message | registry:ui | Render an AI reply token by token like ChatGPT's typing effect — blinking cursor, stop button, and no layout jump as the text grows. | `npx shadcn@latest add https://scrimui.dev/r/streaming-message.json` |
| user-message | registry:ui | The user's chat bubble — right-aligned, with hover actions to copy, edit the prompt, or regenerate the answer. | `npx shadcn@latest add https://scrimui.dev/r/user-message.json` |
| message-actions | registry:ui | The action row under an AI reply — copy, regenerate, share and thumbs up/down feedback, revealed on hover. | `npx shadcn@latest add https://scrimui.dev/r/message-actions.json` |
| error-message | registry:ui | What to show when a generation fails — a plain-English reason, a retry button, and a countdown for rate limits. | `npx shadcn@latest add https://scrimui.dev/r/error-message.json` |
| markdown-message | registry:ui | A rendered markdown reply — syntax-highlighted code blocks with copy buttons, plus tables, lists and safe links. | `npx shadcn@latest add https://scrimui.dev/r/markdown-message.json` |
| streaming-markdown | registry:ui | Markdown that renders correctly while it is still arriving — bold, code spans, links and tables settle without ever flashing raw syntax or reflowing. | `npx shadcn@latest add https://scrimui.dev/r/streaming-markdown.json` |
| response-versions | registry:ui | The 1/3 pager after a regenerate — previous and next versions, branch markers, continue-from-here, and honest generating, failed and stopped states. | `npx shadcn@latest add https://scrimui.dev/r/response-versions.json` |
| conversation-sidebar | registry:ui | The chat-history sidebar every AI app rebuilds — search, inline rename, pin, and delete with undo, grouped by date, with loading and empty states. | `npx shadcn@latest add https://scrimui.dev/r/conversation-sidebar.json` |
| artifact-preview | registry:ui | The side panel for generated output — preview/code toggle, copy, download, version switching, and streaming, error and stale states. | `npx shadcn@latest add https://scrimui.dev/r/artifact-preview.json` |
| reasoning | registry:ui | A collapsible chain-of-thought panel — show the model's reasoning trace with elapsed time, folded away by default. | `npx shadcn@latest add https://scrimui.dev/r/reasoning.json` |
| thinking-indicator | registry:ui | The loading state before the first token — bouncing dots, a blinking caret, or a labeled status line while the model thinks. | `npx shadcn@latest add https://scrimui.dev/r/thinking-indicator.json` |
| reasoning-steps | registry:ui | A multi-step reasoning trace — each step with its own status and timer, so a long think reads as progress, not a hang. | `npx shadcn@latest add https://scrimui.dev/r/reasoning-steps.json` |
| tool-call | registry:ui | How to show a function call in chat — the arguments sent, the result returned, run status, and an expand toggle. | `npx shadcn@latest add https://scrimui.dev/r/tool-call.json` |
| search-tool-call | registry:ui | A web search the model ran — the query it chose, how many results came back, and previews of the sources it read. | `npx shadcn@latest add https://scrimui.dev/r/search-tool-call.json` |
| code-execution | registry:ui | A code interpreter run inside chat — the snippet, a running state, stdout as it streams, and errors that stay readable. | `npx shadcn@latest add https://scrimui.dev/r/code-execution.json` |
| generative-ui | registry:ui | Render a React component from a tool result instead of text — a skeleton in the widget's own shape, and a text fallback when the client has no renderer. | `npx shadcn@latest add https://scrimui.dev/r/generative-ui.json` |
| generated-media | registry:ui | The result card for AI-generated images, audio and video — queue and stage states, variants, download and regenerate, and a safety block that isn't an error. | `npx shadcn@latest add https://scrimui.dev/r/generated-media.json` |
| source-card | registry:ui | A cited source as a card — favicon, page title, domain, and the snippet the answer actually drew from. | `npx shadcn@latest add https://scrimui.dev/r/source-card.json` |
| source-list | registry:ui | The passages retrieval actually returned, with similarity scores and a visible relevance floor — including the case where nothing cleared it. | `npx shadcn@latest add https://scrimui.dev/r/source-list.json` |
| citation-ui | registry:ui | Inline citation markers in generated text — numbered footnotes that reveal the source in a hover preview card. | `npx shadcn@latest add https://scrimui.dev/r/citation-ui.json` |
| citation-popover | registry:ui | A citation marker that shows the passage it came from — fixed positioning that survives a scrolling answer, touch and keyboard, and an honest state for a numbe… | `npx shadcn@latest add https://scrimui.dev/r/citation-popover.json` |
| agent-status | registry:ui | Status for an AI agent working on its own — running, waiting on you, completed or failed, with what it did last. | `npx shadcn@latest add https://scrimui.dev/r/agent-status.json` |
| approval-request | registry:ui | The human-in-the-loop confirmation — what the agent wants to do, the exact details, and allow or deny before it acts. | `npx shadcn@latest add https://scrimui.dev/r/approval-request.json` |
| approval-gate | registry:ui | The approval card as a lifecycle: a decision that survives a closed tab, is idempotent across two open ones, and says what happened when it lands after the req… | `npx shadcn@latest add https://scrimui.dev/r/approval-gate.json` |
| agent-plan | registry:ui | The checklist an agent writes for itself and then edits mid-run — steps added, skipped and re-ordered, without the list jumping under the reader. | `npx shadcn@latest add https://scrimui.dev/r/agent-plan.json` |
| agent-handoff | registry:ui | One agent passing work to another — who asked, what was carried across, and what the receiving agent was not told. | `npx shadcn@latest add https://scrimui.dev/r/agent-handoff.json` |
| agent-run-timeline | registry:ui | The activity log for a long agent run — collapsible success clusters, retry-linked events, approval gates in place, and a follow that respects the reader. | `npx shadcn@latest add https://scrimui.dev/r/agent-run-timeline.json` |
| response-rating | registry:ui | Thumbs up and down that ask the one follow-up question worth asking — with a state for feedback that has been sent and cannot be taken back. | `npx shadcn@latest add https://scrimui.dev/r/response-rating.json` |
| inline-correction | registry:ui | Fix the answer where it is wrong, in place — the edit becomes training data, so the component keeps the original alongside it rather than overwriting it. | `npx shadcn@latest add https://scrimui.dev/r/inline-correction.json` |
| output-comparison | registry:ui | Two answers, side by side, with the model names hidden until a winner is picked — because a visible label is the thing being measured. | `npx shadcn@latest add https://scrimui.dev/r/output-comparison.json` |
| eval-results | registry:ui | Pass rates per test case across two runs, with the regressions surfaced first and a sample size honest enough to say when a delta means nothing. | `npx shadcn@latest add https://scrimui.dev/r/eval-results.json` |
| edit-diff-view | registry:ui | A streamed AI edit as hunks you accept or reject one by one — id-keyed decisions, word-level marks, and buttons that stay disabled while a hunk is still arrivi… | `npx shadcn@latest add https://scrimui.dev/r/edit-diff-view.json` |
| file-upload | registry:ui | A drag-and-drop upload zone — per-file progress bars, type icons, and error states for files too big or of the wrong type. | `npx shadcn@latest add https://scrimui.dev/r/file-upload.json` |
| context-files | registry:ui | The files currently in the model's context — sizes, how many tokens each one costs, and removal without leaving the chat. | `npx shadcn@latest add https://scrimui.dev/r/context-files.json` |
| context-picker | registry:ui | The @-mention menu for adding context to a prompt — files, web pages and knowledge bases with search, recent items, access states and token cost. | `npx shadcn@latest add https://scrimui.dev/r/context-picker.json` |
| context-usage | registry:ui | How much of the context window is gone and to what — system prompt, files, history — plus what gets dropped first when the next message does not fit. | `npx shadcn@latest add https://scrimui.dev/r/context-usage.json` |
| memory-list | registry:ui | The memory panel — every fact the assistant has saved about the user, with the ability to add one or make it forget. | `npx shadcn@latest add https://scrimui.dev/r/memory-list.json` |
| memory-suggestion | registry:ui | The prompt an assistant shows before saving something about you — the fact it noticed, and your choice to keep or dismiss it. | `npx shadcn@latest add https://scrimui.dev/r/memory-suggestion.json` |
| memory-chip | registry:ui | A small inline chip confirming a fact was saved to memory — quiet enough to ignore, clear enough to undo. | `npx shadcn@latest add https://scrimui.dev/r/memory-chip.json` |
| model-selector | registry:ui | A standalone model picker — compare models in a dropdown with badges for speed, context length and what each supports. | `npx shadcn@latest add https://scrimui.dev/r/model-selector.json` |
| reasoning-level | registry:ui | A control for how hard the model should think — light, balanced or deep, with the tradeoff between speed and depth shown. | `npx shadcn@latest add https://scrimui.dev/r/reasoning-level.json` |
| tool-toggle | registry:ui | Switches for the tools a model may use — web search, code execution, file access — with unmistakable on and off states. | `npx shadcn@latest add https://scrimui.dev/r/tool-toggle.json` |
| cost-meter | registry:ui | Live spend per message and per conversation — cached input priced apart from fresh, reasoning tokens shown without double-counting, and a visible ~ when a prov… | `npx shadcn@latest add https://scrimui.dev/r/cost-meter.json` |
| voice-input | registry:ui | A microphone button that expands into a recording panel — live waveform, a running transcript, and cancel or send. | `npx shadcn@latest add https://scrimui.dev/r/voice-input.json` |
| voice-waveform | registry:ui | An animated audio waveform — distinct bar motion for listening, recording, and the assistant speaking back. | `npx shadcn@latest add https://scrimui.dev/r/voice-waveform.json` |
| voice-conversation | registry:ui | A voice conversation as it happens — who is speaking, the live transcript, and replay for any individual turn. | `npx shadcn@latest add https://scrimui.dev/r/voice-conversation.json` |
| refusal-message | registry:ui | How to say no without ending the conversation — the refusal, a plain-language reason, and one redirect the reader can click. | `npx shadcn@latest add https://scrimui.dev/r/refusal-message.json` |
| moderation-flag | registry:ui | What to show when the content filter fires — a stopped stream that keeps its partial text, or a blocked prompt, with a false-positive path. | `npx shadcn@latest add https://scrimui.dev/r/moderation-flag.json` |
| confidence-answer | registry:ui | An answer that says how sure it is — a warning badge only when there is something to warn about, and a hedge that names what to verify. | `npx shadcn@latest add https://scrimui.dev/r/confidence-answer.json` |
| voice-call-controls | registry:ui | The chrome around a live voice call — an unmistakable mute toggle, a running call timer, and an end button that's always one tap away. | `npx shadcn@latest add https://scrimui.dev/r/voice-call-controls.json` |
| memory-toast | registry:ui | The 'Memory updated' receipt — shows the exact fact that was saved, with one-tap Undo and a quiet link to manage memories. | `npx shadcn@latest add https://scrimui.dev/r/memory-toast.json` |
| ai-chat | registry:block | The canonical chat interface — sidebar, streaming messages, prompt input with model selector, and sources. | `npx shadcn@latest add https://scrimui.dev/r/ai-chat.json` |
| research-assistant | registry:block | A research flow that shows search tool calls, reasoning, sources and a cited final answer. | `npx shadcn@latest add https://scrimui.dev/r/research-assistant.json` |
| coding-agent | registry:block | A coding run with agent status, tool calls, diffs and a human-in-the-loop approval gate. | `npx shadcn@latest add https://scrimui.dev/r/coding-agent.json` |
| voice-assistant | registry:block | A voice-first conversation — live waveform states, a recording input, a spoken transcript and a typed fallback. | `npx shadcn@latest add https://scrimui.dev/r/voice-assistant.json` |
| model-preferences | registry:block | A preferences screen that picks the model, reasoning level and tools, and manages persistent memory. | `npx shadcn@latest add https://scrimui.dev/r/model-preferences.json` |
| artifact-workspace | registry:block | Chat on the left, generated output on the right — artifacts open from the answer, stream, version, and fail without breaking the conversation. | `npx shadcn@latest add https://scrimui.dev/r/artifact-workspace.json` |
| rag-workspace | registry:block | Ask your own documents — upload and parse, cited answers with inspectable passages, an honest not-found state, and a visible context budget. | `npx shadcn@latest add https://scrimui.dev/r/rag-workspace.json` |
| extraction-review | registry:block | Upload a document, watch fields fill in, then review the flagged ones — per-field confidence, corrections that keep the original, export earned. | `npx shadcn@latest add https://scrimui.dev/r/extraction-review.json` |
| image-studio | registry:block | A one-screen generation studio — prompt composer and model picker beside a feed of queued, staged, blocked and ready image results with variants. | `npx shadcn@latest add https://scrimui.dev/r/image-studio.json` |
| agent-console | registry:block | Watch a fleet of agents at once — parallel statuses, an inspectable handoff, a waiting approval, a failed child run, and per-run plus fleet cost. | `npx shadcn@latest add https://scrimui.dev/r/agent-console.json` |
| support-copilot | registry:block | Grounded reply drafts with citations, honest low-confidence answers, inline corrections, an approval gate on refunds, and a rating row on every draft. | `npx shadcn@latest add https://scrimui.dev/r/support-copilot.json` |
| generative-dashboard | registry:block | The model assembles a dashboard from a controlled widget registry — streamed props, an unsupported-request fallback, and widget clicks that re-enter the chat. | `npx shadcn@latest add https://scrimui.dev/r/generative-dashboard.json` |

## For AI agents

```text
You are adding components from @scrimui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/scrimui.md) for the component list.
2. Fetch the machine-readable index: https://scrimui.dev/r/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: scrimui).
```