Skip to content
Scrim UI
Browse all components

The component library

Components

Small, considered building blocks for AI products. Explore 73 components, try the previews, and copy the source into your project.

Prompt & Input

6 components

Prompt Input

6 variants

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.

Prompt Input + Attachments

3 variants

A chat input that accepts file uploads — attachment chips with upload progress, type icons, and one-click removal.

Prompt Input + Model Selector

2 variants

A chat input with the model picker built in — switch models inline, with badges for what each one can do.

Prompt Editor

4 variants

A prompt template editor with {{variables}} highlighted as you type, a rendered preview, and a line diff against the previous version.

Secure Input

React · Vue · Svelte

A card the agent sends in chat when it needs a secret for the screen it is driving. The value is handed to that screen, not typed into the thread.

AI Agent Input

React · Tailwind · Original build

An agent composer with file attachments, model selection and a prompt enhancement state.

Messages

13 components

Streaming Message

3 variants

Render an AI reply token by token like ChatGPT's typing effect — blinking cursor, stop button, and no layout jump as the text grows.

User Message

3 variants

The user's chat bubble — right-aligned, with hover actions to copy, edit the prompt, or regenerate the answer.

Message Actions

3 variants

The action row under an AI reply — copy, regenerate, share and thumbs up/down feedback, revealed on hover.

Error & Retry

3 variants

What to show when a generation fails — a plain-English reason, a retry button, and a countdown for rate limits.

Markdown Message

3 variants

A rendered markdown reply — syntax-highlighted code blocks with copy buttons, plus tables, lists and safe links.

Streaming Markdown

2 variants

Markdown that renders correctly while it is still arriving — bold, code spans, links and tables settle without ever flashing raw syntax or reflowing.

Response Versions

5 variants

The 1/3 pager after a regenerate — previous and next versions, branch markers, continue-from-here, and honest generating, failed and stopped states.

Code Block

React · Vue · Svelte

A code block with a language label and one-click copy button.

Comparison Table

React · Vue · Svelte

A feature-by-plan comparison matrix with checkmarks.

Data Table

React · Vue · Svelte

A tidy data table for structured comparisons and results.

Message Actions (AICSS)

React · Vue · Svelte

The action row under an assistant message: good response, bad response, copy, an emoji reaction, reply, and more.

Streaming Text

React · Vue · Svelte

Typewriter-style streaming text with a blinking caret.

Text Response

React · Vue · Svelte

Clean prose styling for a standard assistant answer with inline code.

Conversation & Artifacts

2 components

Conversation Sidebar

5 variants

The chat-history sidebar every AI app rebuilds — search, inline rename, pin, and delete with undo, grouped by date, with loading and empty states.

Artifact Preview

5 variants

The side panel for generated output — preview/code toggle, copy, download, version switching, and streaming, error and stale states.

Reasoning & Progress

6 components

Thinking / Reasoning

2 variants

A collapsible chain-of-thought panel — show the model's reasoning trace with elapsed time, folded away by default.

Thinking Indicator

3 variants

The loading state before the first token — bouncing dots, a blinking caret, or a labeled status line while the model thinks.

Reasoning Steps

3 variants

A multi-step reasoning trace — each step with its own status and timer, so a long think reads as progress, not a hang.

Orbs

React · Vue · Svelte

Compact animated activity indicators for agent UIs - discrete DOM and CSS orbs that signal what the agent is doing without blocking the thread.

Thinking + Reasoning

React · Vue · Svelte

An animated, collapsible thinking block: a shimmering label expands to reveal the agent's reasoning, then folds into a “Thought for Ns” summary.

Thinking State

React · Vue · Svelte

A minimal shimmering label that signals the agent is processing before it answers.

Tool Calls

7 components

Tool Call

3 variants

How to show a function call in chat — the arguments sent, the result returned, run status, and an expand toggle.

Search Tool Call

2 variants

A web search the model ran — the query it chose, how many results came back, and previews of the sources it read.

Code Execution

3 variants

A code interpreter run inside chat — the snippet, a running state, stdout as it streams, and errors that stay readable.

Generative UI

3 variants

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.

Generated Media Result

6 variants

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.

File Diff

React · Vue · Svelte

An inline diff card showing the additions and deletions the agent proposes.

Image Generation State

React · Tailwind · Original build

A loading canvas that moves through queued, generating and ready states.

Sources & Citations

5 components

Source List

3 variants

The passages retrieval actually returned, with similarity scores and a visible relevance floor — including the case where nothing cleared it.

Citation UI

3 variants

Inline citation markers in generated text — numbered footnotes that reveal the source in a hover preview card.

Citation Popover

3 variants

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 number the model invented.

Agents

8 components

Agent Status

4 variants

Status for an AI agent working on its own — running, waiting on you, completed or failed, with what it did last.

Approval Request

3 variants

The human-in-the-loop confirmation — what the agent wants to do, the exact details, and allow or deny before it acts.

Approval Gate

5 variants

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 request expired.

Agent Plan

4 variants

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.

Agent Handoff

3 variants

One agent passing work to another — who asked, what was carried across, and what the receiving agent was not told.

Agent Run Timeline

5 variants

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.

Approval Card

React · Tailwind · Original build

A review card for commands, clarifying questions and short plans, with a visible decision state.

Agent Task List

React · Tailwind · Original build

A collapsible agent to-do list with done, active and pending task states.

Evaluation & Feedback

5 components

Response Rating

3 variants

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.

Inline Correction

3 variants

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.

Output Comparison

3 variants

Two answers, side by side, with the model names hidden until a winner is picked — because a visible label is the thing being measured.

Eval Results

3 variants

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.

Edit Diff View

4 variants

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

Files & Context

4 components

File Upload

4 variants

A drag-and-drop upload zone — per-file progress bars, type icons, and error states for files too big or of the wrong type.

Context Files

3 variants

The files currently in the model's context — sizes, how many tokens each one costs, and removal without leaving the chat.

Context Picker

5 variants

The @-mention menu for adding context to a prompt — files, web pages and knowledge bases with search, recent items, access states and token cost.

Context Usage

3 variants

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.

Voice

5 components

Voice Input

2 variants

A microphone button that expands into a recording panel — live waveform, a running transcript, and cancel or send.

Voice Waveform

4 variants

An animated audio waveform — distinct bar motion for listening, recording, and the assistant speaking back.

Voice Conversation

2 variants

A voice conversation as it happens — who is speaking, the live transcript, and replay for any individual turn.

Voice Call Controls

2 variants

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.

Audio Waves

React · Tailwind · Original build

A voice-input waveform with a live microphone test and a clear recording state.

Memory

4 components

Memory List

2 variants

The memory panel — every fact the assistant has saved about the user, with the ability to add one or make it forget.

Memory Suggestion

2 variants

The prompt an assistant shows before saving something about you — the fact it noticed, and your choice to keep or dismiss it.

Memory Chip

2 variants

A small inline chip confirming a fact was saved to memory — quiet enough to ignore, clear enough to undo.

Memory Toast

3 variants

The 'Memory updated' receipt — shows the exact fact that was saved, with one-tap Undo and a quiet link to manage memories.

Model & Settings

5 components

Model Selector

2 variants

A standalone model picker — compare models in a dropdown with badges for speed, context length and what each supports.

Reasoning Level

2 variants

A control for how hard the model should think — light, balanced or deep, with the tradeoff between speed and depth shown.

Tool Toggle

2 variants

Switches for the tools a model may use — web search, code execution, file access — with unmistakable on and off states.

Cost Meter

4 variants

Live spend per message and per conversation — cached input priced apart from fresh, reasoning tokens shown without double-counting, and a visible ~ when a provider did not report enough to be sure.

Reasoning Effort

React · Vue · Svelte

A stepped control for how much reasoning a model spends. Low keeps the budget short, Extra High uses the full thinking budget. While you drag, the model and the active level merge out of the track, then fold back on release.

Safety & Refusal

3 components

Refusal Message

3 variants

How to say no without ending the conversation — the refusal, a plain-language reason, and one redirect the reader can click.

Moderation Flag

2 variants

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.

Confidence Answer

3 variants

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.