echo-ui-core
v0.2.0
Published
Echo UI's design grammar: the theme engine, tokens, material, sound, motion and tactile feedback.
Maintainers
noormtirReadme
echo-ui-core
The design grammar of Echo UI: the theme engine, tokens, material, sound, motion and tactile feedback that every Echo component is built on.
You don't usually install this by hand. Echo components depend on it, so adding a component installs it for you. Install it directly if you use the theme or sound engine on their own:
npm install echo-ui-coreWhat's in it
| Import | What it gives you |
| --- | --- |
| echo-ui-core/theme | createEchoTheme(seed): one seed color becomes the full set of --echo-* tokens, with WCAG AA contrast guaranteed for any seed |
| echo-ui-core/theme/material.css | The molded-plastic material recipes |
| echo-ui-core/sound | SoundProvider and the WebAudio synth that plays Echo's sound tokens |
| echo-ui-core/motion | GSAP motion tokens, each with a reduced-motion version |
| echo-ui-core/tactile | useTactile: motion and sound bound to press and release |
| echo-ui-core/presence | useGsapPresence: exit animations that finish before Base UI unmounts |
Setup
import { createEchoTheme } from "echo-ui-core/theme";
import { SoundProvider } from "echo-ui-core/sound";
const { css } = createEchoTheme({ accent: "#DE3B74" });
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<style>{css}</style>
</head>
<body>
<SoundProvider>{children}</SoundProvider>
</body>
</html>
);
}Peer dependencies: react and react-dom 18 or later, and gsap 3.
MIT licensed.