# open-claude-ui: a React component library rebuilt from a desktop client

> open-claude-ui is an MIT-licensed TypeScript library that reconstructs the design system and interaction physics of a commercial AI desktop client, with 30 modules, 183 design tokens and a 3,000 line reverse-engineering manual. The tokens and pure CSS layers can be consumed without React or Tailwind at all.

**Caho1/open-claude-ui** — 基于 REA 深度拆解并高保真还原 Claude 官方桌面端 UI。还原 30 个独立 React 组件与 8 项硬核交互物理算法，附带 3000+ 行逆向分析手册。

- Repository: https://github.com/Caho1/open-claude-ui
- Stars: 1,725 · Forks: 321
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/caho1-open-claude-ui

## What the repository actually ships

open-claude-ui is a component library and motion engine rather than an application. The README describes it as a high-fidelity open source UI component library built from a deep teardown of a modern desktop AI client, and the package manifest gives it version 1.0.0 with the name open-claude-ui, React 18 or later, Tailwind CSS 3.4 or later, Framer Motion 11 or later and TypeScript 5.5 or later as its stated baseline.

The scope is stated in numbers. Thirty production modules are split into 11 basic atomic controls and 19 deeper architecture modules and React hooks, described as ready to copy and use with no black box dependencies. Alongside them sits a technical manual of more than 3,000 lines and 31 core subsections, organised into seven chapters, and a single file offline Storybook that opens in a browser.

The method behind it is worth naming, because it explains the shape of the result. The README states that the teardown, deobfuscation and resource extraction were carried out with REA, a separate reverse-engineering framework, and that the component specifications, physical damping constants, shader keyframes and audio pipelines were derived from the compiled front-end rather than approximated by eye.

The repository is actively worked on, with the last push on 2026-10-19, and it ships no GitHub releases, so the version to look at is the one in the repository.

## The tokens layer works without React

The most useful engineering decision in the library is the separation between the token layer and the React layer. The README states that the tokens and the pure CSS presentation layer can be used independently of React and Tailwind, in a custom desktop harness, a traditional web page or a Vue or Svelte host, and it gives the imports:

```css
@import "open-claude-ui/tokens.css";
@import "open-claude-ui/pure.css";
```

The package manifest backs this up. Beyond the main entry point it exports the css, tokens.css, tokens, pure.css and pure paths, all of them pointing at plain CSS files in the code-examples directory, plus a tailwind export pointing at a shared Tailwind configuration.

The point of that split is scale. A team that wants the visual language of the original client, with its spacing, radii, colour ramp and motion timings, can take the CSS and get a consistent look in whatever framework it already uses, without pulling in React hooks, Framer Motion or the component library. The package manifest lists framer-motion, lucide-react, react and react-dom as peer dependencies, so a consumer chooses the React path deliberately rather than by accident.

The pure CSS layer also carries behaviour that does not need JavaScript. The README calls out a zero-JS native scroll fade mask driven by the attribute [data-cds-scroll-fade], which is the kind of detail that normally requires a script and a resize listener.

## Colour, radii and the half-pixel hairline

The design system is documented as a set of concrete numbers, which is what makes it reproducible rather than a mood board.

The palette is built on a clay orange, #d97757, described as the brand colour, over four low-contrast surface steps. In light mode those run from #f5f5f3 up to #ffffff, and in dark mode from #0b0b0a to #20201e. Corner radii are specified as a matrix rather than a single value: 20px for the outer composer frame, 18px for message bubbles, 10px for panels and 6, 8 or 10px for buttons depending on size.

Two typographic details are the kind that separate a careful reconstruction from an approximation. There is a 0.5px hairline compensation for high-density screens, described as a hairline ring, and a rule that a panel should use a single closed border. In dark mode the text weight is compensated in the opposite direction, subtracting weight to stop characters looking swollen against a dark background, and inline icons are offset by -.125em for optical vertical centring.

Motion has its own token set with explicit physical time constants: 70ms for a tactile micro-shake, 120ms for a geometric snap and 300ms for a panel sliding in, each with asymmetric bezier curves rather than a single easing.

## Interaction physics and the scroll fade mask

The README describes four tuned sets of physical spring parameters, a 4px dead zone for pointer movement, a guard against CJK input method composition, and a seven-step non-linear alpha mask for fading content at the scroll edges.

The pointer dead zone is a small thing with a large effect on perceived quality. Ignoring movement under four pixels means a click does not jitter the element it lands on, which is the difference between an interface that feels solid and one that feels twitchy.

The CJK guard matters for a Chinese-speaking audience specifically. Input method composition means a sequence of keystrokes is temporarily held by the IME, and a composer that reads keystrokes directly can fire commands mid-composition. The composer in this library combines that guard with slash and at-sign trigger characters for commands and context, and an adaptive height that grows with the content.

The scroll fade is described as a seven-step non-linear alpha gradient with a dynamic scroll position sensor that returns to zero at the top or bottom of the scroll area. The related motion work includes a warm clay glow field named wl-glow, a text shine effect called cds-shimmer-text-shine built on an asymmetric bezier, and a shimmer skeleton screen with a 105 degree sweep.

## Sound and media without shipping binary assets

The audio approach is a deliberate constraint. The library contains no recorded audio files; sounds are synthesised at runtime with the native Web Audio API oscillators, described as zero-latency synthesis. The manual covers an AudioWorklet architecture that the README says was reverse engineered, a 30 percent soothing volume standard for the voice mode, and a six-band non-linear gamma waveform bar.

The media side covers the gallery and the lightbox. Shared element morphing uses View Transitions, and the pan and zoom is an affine transform anchored on the cursor, so the point under the pointer stays under the pointer while the image is scaled. The runway viewport is 75vw wide. The split resizer protects against iframe events swallowing pointer input, uses the same 4px dead zone, snaps to a 50/50 split on a double click, and can collapse an edge entirely.

For desktop integration, the README lists macOS vibrancy with a frosted glass blend, sidebar drag and drop, a Cowork canvas for multi-agent topologies, and accessibility work around roving focus.

The compliance note is explicit that no proprietary binary assets are distributed, including commercial fonts and recorded audio, and that the project ships a native system font fallback stack instead.

## The React layer: composer, thinking states and MCP cards

The React components cover a conversation client rather than a generic widget set. The feature list names CdsButton, SegmentedControl, StatusIndicators and Dialog as the atomic controls, and the segmented control is described as a 999px fully rounded track with 2px geometric padding, positioned geometrically, with a Framer Motion layoutId for the sliding selection.

Status indicators are small but specific: a clay breathing indicator on a 2.4 second cycle, a live activity pulse at 1.2 seconds, a three-dot thinking wave, and a skeleton screen with an angled sweep at 105 degrees.

On the conversation side, there are separate bubble treatments for user and assistant messages, with the assistant side borderless, a collapsible thinking section animated by a CSS Grid transition from 0fr to 1fr, and a mutex that forces the section open while generation is in progress. The model switcher covers three tiers of models with a thinking toggle, a four-colour breakdown of prompt caching cost, and a ring-shaped SVG meter.

The tool calling cards implement a strict three-state authorisation machine, pending_approval to running to success or error, with a three-tier action array and payload review. That state machine is the part with real security weight: an approval prompt that can be skipped or mis-rendered is how a tool call ends up running when a user did not intend it.

## Compliance, provenance and what to check before shipping

The repository makes a clean-room compliance claim for assets, and the README states that no proprietary binary assets are distributed, with a native system font fallback stack and purely code-synthesised sound effects so the package is self-contained. The assets directory has its own README describing that policy, and a badge in the README marks asset compliance.

Two things are worth separating. The MIT licence covers the code in this repository. It does not grant rights over the design of the original client, so a product that ships this library should think carefully about presenting itself as a clone of a competitor's interface, and legal advice is not what this review can give. The reverse-engineering provenance is also explicit, since the README attributes the teardown to the REA framework, which means the derivation is documented rather than hidden.

For a developer evaluating the library, the practical checks are mechanical. The package manifest exposes a check:tokens script, so you can verify that the token set matches what the components expect. There is a storybook script that opens the single file preview, so you can look at all the component motion before integrating anything. And because the token layer works on its own, you can decide later whether to pull in React at all.

What you should confirm first is which parts you actually need. The physics constants are tuned for one particular application, and the colours, radii and timings will carry that product's character into yours, whether or not that is what you want.

## Conclusion

open-claude-ui suits a team building an AI chat interface that wants a documented set of design tokens, motion constants and interaction details rather than inventing them, and it suits teams outside React that want only the CSS layer. It is the wrong choice if you need a neutral visual identity, since the palette, radii and physics are tuned to reproduce one specific commercial product, and the MIT licence covers the code rather than the design it reproduces. Verify first that the token set you inherit matches your brand, that the listed peer dependency versions fit your React version, and that the tool-call approval state machine is wired so a pending approval cannot be skipped by an impatient click.

## FAQ

### Can I use open-claude-ui without React or Tailwind?

Yes. The README states that the token layer and the pure CSS presentation layer can be consumed independently, with @import "open-claude-ui/tokens.css" or @import "open-claude-ui/pure.css", giving access to the 183 design tokens and the zero-JS scroll fade behaviour in any host framework.

### Does the package ship fonts or audio files?

No. The README states that no proprietary binary assets are distributed, including commercial fonts and recorded mp3 files, and that the project instead ships a system font fallback stack and sound effects synthesised in code through the Web Audio API.

### What does the package include besides components?

A technical manual of more than 3,000 lines and 31 subsections across seven chapters documenting the reverse-engineered design system, plus a single file offline Storybook that previews all component motion in a browser, and the 183 design tokens.

### What are the peer dependencies of open-claude-ui?

The package manifest lists framer-motion at 10.0.0 or later, lucide-react at 0.280.0 or later, react and react-dom at 18.0.0 or later. The library targets TypeScript 5.5 or later and Tailwind CSS 3.4 or later.

## Sources

- [Caho1/open-claude-ui on GitHub](https://github.com/Caho1/open-claude-ui)
- [Issues](https://github.com/Caho1/open-claude-ui/issues)
- [License: MIT](https://github.com/Caho1/open-claude-ui/blob/main/LICENSE)
- [README](https://github.com/Caho1/open-claude-ui/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/caho1-open-claude-ui