Echo UI

Echo UI is a tactile React component library, and the design system that keeps your AI agent on-brand.

Echo is one design system, not a bundle of components. Every part is molded from the same material and follows the same rules: caps in recessed wells, emissive LCD readouts, real press travel. One colour themes all of them, and they press, sound and move the same way, so your product feels like one thing. Motion and sound are first-class token families alongside colour and type, so a button does not just look pressed, it moves and it clicks.

Your style goes on top. Echo keeps the feel (the press, the sound, the motion, the AA floor), and the look is yours:

1. Your mood boards become styles. Echo's Design Eye reads them, asks you what a board can't settle, and saves each style to your own private library. A board drawn in line becomes a drawn device.
2. A new app picks its style. init sets the project up, and Style Fit picks the style that fits.
3. Your agent builds the screen, asking Echo which component does each job. Changing one setting later, like "rounder", is one line: style set.
4. When it slips, Echo hands it back. A check runs on every file your agent saves, and when it says it's done, Echo's tests (design and axe) run on the pages it changed until they pass.
5. Next product, next style. The same components and the same feel, in another look.

The workflow follows one builder through all five.

Echo's components are copied, not installed: its CLI puts their source in your repo and you own it from there. The one npm package is echo-ui-core, the small shared grammar they import (the theme engine, sound, motion and tactile feedback).

npx echo-ui-cli init
npx echo-ui-cli add hardware-button

115 items: 113 components (two of them hooks) and 2 whole-screen templates. Every one has a docs page that is axe-clean, works from the keyboard, runs on Chromium and WebKit in the test suite, and relights from a single colour seed.

_{The Console template, one command: npx echo-ui-cli add console. A rail, six readouts, a level matrix and a table on one screen.}

Browser support

Chrome/Edge 111+, Safari 16.2+, Firefox 113+. Declared as a browserslist key so a build tool can read it, and checked on two engines — the test suite runs against Chromium and WebKit.

The floor is oklch() and color-mix(). Echo's whole colour system derives every surface, every border and every state from one seed colour, and that derivation happens in CSS at paint time rather than being precomputed — which is what lets a theme relight from a single value. Those two functions are how.

Below the floor the failure is silent: an unsupported color-mix() makes the whole declaration invalid rather than falling back, so a surface loses its colour instead of degrading. createEchoTheme therefore emits one @supports not (color: color-mix(…)) guard that paints plain seed colours on the page root. An out-of-baseline visitor gets something legible and obviously unstyled rather than invisible text on an invisible background. There are no per-property fallbacks beyond that, and there will not be: a flat-colour twin for every color-mix() in the library is a second, worse design system running in parallel forever.

Install

Before you start: a Next.js 16 (App Router) or Vite app on React 18 or later, with TypeScript (components ship as .tsx), and Node 2

... View full README on GitHub