Caho1/open-claude-ui

Overview

open‑claude‑ui is an open‑source UI component library that recreates the look‑and‑feel of Anthropic’s Claude desktop client. The authors used the REA reverse‑engineering framework to de‑compile Claude’s production Electron bundle, extract the exact design tokens, interaction physics, and animation parameters, and then re‑implemented them as a set of reusable React components written in TypeScript and styled with Tailwind CSS.

The repository ships:

• 30 ready‑to‑use components and hooks (buttons, segmented controls, chat bubbles, composer, model switcher, audio player, etc.)
• A full Tailwind theme that defines Claude’s colour palette, surface levels, “clay” orange, hairline borders, and motion tokens
• A lightweight, offline Storybook‑style HTML preview for visual testing
• Detailed reverse‑engineering documentation (≈3 000 lines) that explains where each UI constant was sourced from the original app
• Helper hooks for accessibility, rate‑limit back‑off, scroll‑pinning, shared‑element transitions, and more

All code runs in a standard React 18 environment; no proprietary binaries or assets are included.

---

Key Features

Feature	What it provides
High‑fidelity Claude design system	Exact colour tokens, surface levels, 0.5 px hairline borders, and 4‑step spring physics that match the official desktop client.
30 production‑grade components	Buttons, segmented controls, status indicators, dialogs, chat bubbles, composer with CJK IME guard, model switcher with token gauge, audio synthesis, media lightbox, split‑pane resizer, coworking canvas, etc.
Motion engine	Pre‑built Framer‑Motion spring presets and custom keyframe shaders (ambient glow, scroll‑fade masks, non‑linear alpha masks).
Web‑Audio based sound effects	Zero‑latency synthetic prompts generated with the native Web Audio API—no external MP3 files.
Desktop‑specific integrations	macOS vibrancy, draggable title bar, hidden‑inset window, multi‑window collaboration via BroadcastChannel.
Accessibility	ARIA‑compliant focus‑roving hook, keyboard navigation grid, RTL support.
Offline Storybook	A single HTML file (claude-components-storybook.html) that showcases every component without a dev server.
Agent‑friendly guidelines	AGENTS.md and related files give explicit instructions for AI coding assistants (Copilot, Claude Code, Cursor, etc.) to follow the library’s design constraints.

---

Quick Start

# Install the package
npm i open-claude-ui

import { ChatComposer, CdsButton, ModelSwitcherWithTokenGauge, ScrollFadeContainer } from 'open-claude-ui';

export function App() {
  const [model, setModel] = React.useState('sonnet-3.5');
  const [thinking, setThinking] = React.useState(true);

  return (
    <div className="flex h-screen bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer className="flex-1 p-6">
        <ModelSwitcherWithTokenGauge
          currentModel={model}
         
          extendedThinking={thinking}
         
          tokenBudget={{ inputTokens: 12400, outputTokens: 3200, cacheReadTokens: 48000, cacheWriteTokens: 16000, maxContextWindow: 200000 }}
        />
        <ChatComposer => console.log(msg)} />
        <CdsButton variant="primary">Send</CdsButton>
      </ScrollFadeContainer>
    </div>
  );
}

Add the Tailwind theme from the package (see code-examples/tailwind.config.js) and import the global CSS cds-theme.css to get the exact Claude colours and motion tokens.

---

Who Might Use This?

• Front‑end engineers building a Claude‑style chat UI or any AI‑assistant interface that needs the same polished interaction physics.
• Design systems teams looking for a concrete example of how to encode surface levels, token‑based spacing, and spring‑based motion.
• Researchers or hobbyists interested in how a production Electron app implements its UI and who want a fully documented reverse‑engineered reference.
• AI‑coding agents (Copilot, Claude Code, Cursor, etc.) – the repo includes explicit AGENTS.md rules so the agents can generate code that stays consistent with the library.

---

License

MIT – free for personal, educational, or commercial use.