Scrimui

Overview

Scrim UI is a library of copy-ready React components and interface patterns for AI products. It covers the parts of an AI app that generic UI kits leave out: prompt inputs, token-by-token streaming, reasoning traces, tool calls, citations, agent runs, memory, voice and safety states. The site lists 73 components, and its shadcn registry serves 55 UI components and 13 complete blocks.

The blocks are full working interfaces, such as an AI chat, a RAG workspace with citations pinned to source sentences, a resumable agent console with approvals and per-step cost, and a realtime voice assistant. A few smaller components, including Code Block, File Diff and Orbs, are offered for React, Vue and Svelte. The site also has a Pro tier, plus free tools such as an AI pricing calculator and a system prompt builder.

Features

• Prompt input: Six variants with attachments, a model selector, tool toggles, voice and a send button that becomes stop
• Streaming messages: Typing-effect replies with a cursor, stop control and no layout jump, plus streaming markdown
• Reasoning and tools: Collapsible reasoning panels, reasoning steps, tool call, search tool call and code execution cards
• Citations and sources: Inline citation markers, citation popovers, source cards and source lists
• Agent UI: Agent status, plans, handoffs, run timelines, approval requests and approval gates
• Memory and context: Memory lists, suggestions and chips, context files, context picker and context usage meter
• Voice and safety: Voice input, waveform and call controls, refusal messages, moderation flags and confidence answers
• Complete patterns: AI chat, research assistant, coding agent, support copilot, image studio, extraction review and generative dashboard

Tech stack

• React, Tailwind CSS, shadcn registry (selected components also in Vue and Svelte)

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @scrimui/component-name