Claude Desktop 2.0 UI Components
Claude Desktop 2.0 UI components: effort selector, composer chin, sibling-index() stagger, 1.32× pill overshoot, 0.5px hairlines, skeleton modes. 6 demos.
New in 2.0 collects the interface pieces that Claude Desktop 2.0 introduced or redesigned: the reasoning effort selector, the composer's bottom toolbar, sibling-index() staggered entrances, the pill overshoot rebound, hairlines with touch compensation, and the two skeleton modes. The 6 demos on this page correspond to Chapters 2, 3 and 5 of the v2 handbook. This page is a translation of the Chinese demo page.
Key values
| Item | Value | Source |
|---|---|---|
| Pill overshoot | 80ms scale-up to 1.32× → 120ms overshoot settle | v2/03 §3.5.1 |
| Staggered entrance | delay = index × step (sibling-index()) | v2/02 §2.5.1 |
| Skeleton lockstep | 2.0s cycle, dims to 60% | v2/03 §3.5.2 |
| Skeleton wave | each block delayed by index × 90ms, 105° sweep | v2/03 §3.5.2 |
| Hairline | 0.5px | v2/02 §2.7 |
| Touch compensation | (h-control − row height) / 2 | v2/02 §2.8 |
Reasoning effort selector
2.0 adds reasoning effort levels to the model menu, which decide how long the model thinks.
Composer bottom toolbar
The composer's bottom row holds the effort level and the retry entry for messages that failed to send.
sibling-index staggered entrance
CSS sibling-index() delays each item's entrance by its index, with no JS.
Pill overshoot rebound
When a pill appears it first scales up and then rebounds, in two stages totaling 200ms.
Hairlines and touch compensation
2.0 uses 0.5px borders; the chin buttons look small, but negative margins enlarge their hit area.
Two skeleton modes
Skeletons have two modes, the whole group pulsing in sync or a block-by-block wave, suited to lists and large cards respectively.
How do I use these components in a project?
Copy the matching file from code-examples/ and import cds-theme.css. For example:
.chip { animation-delay: calc(var(--cds-chip-in-base-delay, 50ms) + min(sibling-index() - 1, 8) * 30ms); }Note: some labels inside the demo components are still in Chinese (they come straight from the repository's components); the behavior and specs are the same.
Sources
The specs on this page come from Chapters 2, 3 and 5 of the v2 handbook, components with source code come from the repository's code-examples/, and CSS usage follows the MDN documentation.
- open-claude-ui · code-examples/:
ModelSelectorEffort.tsx,ChatComposerChin.tsx. - cds-theme.css: duration, easing and hairline tokens.
- MDN: sibling-index(): the CSS function behind the staggered entrance; in browsers without support, all elements appear at once.
- MDN: cubic-bezier(): the overshoot curve used by the pill rebound.
Related pages
Desktop Architecture & Interaction Hooks
Claude Desktop-style Electron UI in React: draggable title bar, session reordering, Cowork board, scroll pinning, roving focus, rate-limit backoff. 7 demos.
2.0 Handbook Overview
Claude Desktop 2.0 UI analysis: how the 1.x chat shell became a sandboxed workstation, with a 6-chapter guide to new features, redesigns, tokens and code.