Eddie is a themeable, framework-agnostic web component library built with Lit and TypeScript. It provides a complete design system with components, design tokens, icons, and recipe components for building consistent web interfaces.
Eddie is created and maintained by Brad Frost and Ian Frost at Brad Frost Web LLC.
Yes. Eddie components are native web components (custom elements), which work in any framework or with plain HTML. See our Frameworks guide for specific instructions.
Eddie follows atomic design methodology: Atoms (basic elements) → Molecules (combinations) → Organisms (complex sections) → Recipes (product-specific) → Templates (full pages).
Components are the core library — generic, reusable UI elements. Recipes are product-specific compositions built on top of core components for particular projects (e.g., site headers for bradfrost.com or the we are here. community).
Add a CSS class to <html> (like class="bfw-dark") and import the corresponding token CSS. Eddie's three-tier token architecture remaps all colors, typography, and spacing to match the theme.
No. Consumer projects should contain zero component styles. If Eddie doesn't have a component you need, create a recipe instead. See the Eddie-Only Rule.
npm run eddie-web-components:plopOpen an issue on GitHub with a minimal reproduction.
Eddie targets all modern evergreen browsers. There's no hard-coded support matrix — the philosophy is progressive enhancement and accessibility-first.