AI Chat Interface Components

These AI chat interface components are 38 real, running React demos of a Claude-style chatbot UI, split into 6 pages by handbook chapter and covering every layer from buttons and the composer up to the desktop window. The code is taken directly from the repository's code-examples/, with style variables from cds-theme.css. You can switch to dark mode in the top right; when your system has "reduce motion" turned on, the animations stop.

English edition: the conversation page is translated so far. The other demo pages link to the Chinese originals (marked "Chinese"); the demos themselves work the same in either language.

Atomic components

Atomic components are the lowest-level, most reused controls in the AI chat interface: buttons, status lights and dialogs appear on nearly every panel. Their heights, radii and press feedback all come from one token set; the source lives in CdsButton.tsx, SegmentedControl.tsx, StatusIndicators.tsx, ConfirmationDialog.tsx, AttachmentCard.tsx and ContainerResponsiveBar.tsx.

• Button height ladder: XXS 20 · XS 24 · SM 28 · MD 32 · LG 40px, with 7 variants (primary / secondary / ghost / danger / brand / onContent / outline). Source: v1/02 §2.1.
• Status light: 6px diameter; the thinking three-dot wave runs on a 1.9s cycle. Source: v1/02 §2.3.
• Confirmation dialog: widths sm 400 · md 520 · lg 720px; destructive actions use the danger variant. Source: v1/02 §2.4.
• Attachment tile: a 7.5rem square; long file names are truncated in the middle so the extension stays visible. Source: v1/02 §2.5.

Conversation and input

Conversation and input are the core of the chat experience: every message a user sends passes through the composer, the message bubbles and the thinking panel. The source lives in ChatMessageBubbles.tsx, ThinkingAccordion.tsx, ChatComposer.tsx, RichComposerWithMentions.tsx, ModelSwitcherWithTokenGauge.tsx and McpToolDecisionCard.tsx; the React chat UI page has all 6 demos in English.

• Composer radius: 14px comfortable and 12px compact in 2.0 (20px in 1.x). Source: v2/03 §3.3.
• Thinking collapse: expands with CSS Grid 0fr → 1fr. Source: v1/03 §3.2.
• IME composition guard: Enter is ignored for 500ms after compositionend, so choosing a CJK candidate never sends the message. Source: v1/03 §3.3.2.
• MCP authorization card: three buttons, "Allow once / Always allow / Deny". Source: v1/03 §3.5.

Motion and light

Motion and light define the durations, curves and springs used by every transition, which keeps animation timing consistent across components. The source lives in ClaudeMotionPresets.ts, CdsMotionEngine.tsx, ReasoningAmbientGlow.tsx and ScrollFadeContainer.tsx; values follow 2.0.

• Duration tokens: fast 60 · snap 120 · base 200 · sheet 300 · slow 450ms. Source: v2/04 §4.3.
• Easing curves: ease-out cubic-bezier(.165, .84, .44, 1), ease-snap cubic-bezier(.32, .72, 0, 1), ease-overshoot cubic-bezier(.34, 1.3, .64, 1). Source: v2/04 §4.3.
• Reasoning glow: 1.8s breathing cycle. Source: v1/04 §4.2.
• Scroll fade: a 28px edge mask; the top edge does not fade while scrolled to the top. Source: v1/04 §4.3.

Media and artifacts

Media and artifacts cover voice, images, code and Artifacts, used for voice input, image viewing and showing generated output side by side with the conversation. The source lives in LiveMicActivityBars.tsx, MediaLightboxViewer.tsx, ArtifactsSplitPaneResizer.tsx, EpitaxyIframeBridge.tsx, StreamingDiffViewer.tsx and CodeBlock.tsx.

• Voice waveform: 6 frequency bands with a non-linear gamma mapping. Source: v1/05 §5.1.3.
• Two-pane split: the pane collapses when the divider is dragged within 18% of the edge; double-click resets to 50/50. Source: v1/05 §5.3.
• Code block: 12px radius and a 36px header; the green copy checkmark fades out after 2.5 seconds. Source: v1/05 §5.5.4.

Desktop architecture and interaction hooks

Desktop architecture covers what is specific to Claude Desktop as an Electron app, such as the window title bar, the conversation list and the multi-agent board, plus 4 React hooks you can reuse on their own. The source lives in ClaudeDesktopHeader.tsx, DraggableSessionList.tsx, CoworkAgentCanvas.tsx, useClaudeScrollPinning.ts, useClaudeRovingFocus.ts, useClaudeSharedElementTransition.ts and useRateLimitBackoff.ts.

• Title bar: 74px reserved for the macOS traffic lights and a 45px drag strip. Source: v1/06 §6.1.
• Drag threshold: pointer movement within 4px does not count as a drag. Source: v1/06 §6.2.
• Agent task states: idle → running → waiting_review → completed / errored. Source: v1/06 §6.3.
• Rate-limit backoff: 5-second base, doubling exponentially, capped at 10 minutes. Source: v1/06 §6.7.

New in 2.0

New in 2.0 collects the parts of the interface that Claude Desktop 2.0 introduced or rebuilt, mostly in the model menu, the composer chin and entrance animations. The source lives in ModelSelectorEffort.tsx and ChatComposerChin.tsx; the other 4 demos have no matching file in code-examples and are written in CSS from the descriptions in v2 Chapters 2 and 3.

• Pill overshoot: scales to 1.32× over 80ms, then settles with a 120ms overshoot. Source: v2/03 §3.5.1.
• Skeleton modes: lockstep dims to 60% on a 2.0s cycle; wave delays each block by index × 90ms with a 105° shimmer. Source: v2/03 §3.5.2.
• Hairline: 0.5px, with touch-target compensation of (h-control − line height) / 2. Source: v2/02 §2.7–2.8.

What has no demo

Three kinds of files in the repository have no demo: ClaudeAudioPlayer.ts (recreates the official notification sounds, which are official audio assets, so it is not included), createClaudeMainWindow.ts (Electron main-process code that can't run in a browser), and tailwind.config.js / cds-theme.css / cds-pure.css (configuration and stylesheets, already used across this site).

Assets and affiliation

The site contains no official Anthropic assets: icons are all from lucide, emoji and brand icons in the original components were replaced with neutral icons, and images are generated placeholders. Open Claude UI is an unofficial community project, MIT licensed, and not affiliated with Anthropic.

The design tokens behind these components (colors, radius, shadows, fonts, motion) are documented in Claude Colors & Design Tokens. For where the values come from and how they were analyzed, see Analyzing the Claude desktop UI (Chinese).

Sources

• open-claude-ui repository · code-examples/: the source files behind all 38 demos.
• open-claude-ui README (English): project overview and the MIT license.
• React docs: API reference: the component and hook APIs these demos use.
• MDN: prefers-reduced-motion: the media query behind stopping animations under "reduce motion".

The Design Tokens and Pure-CSS presentation layer can be consumed completely independently from React and Tailwind.

— open-claude-ui README · Introduction