A themeable, framework-agnostic web component library powering Brad Frost Web's entire digital ecosystem — from bradfrost.com to courses, consulting tools, and beyond.
Built as native web components with Lit. Use Eddie with React, Vue, Svelte, Eleventy, or plain HTML — whatever fits your stack.
Five built-in themes powered by a three-tier token architecture. Swap themes with a single CSS class or build your own.
Organized by Atomic Design principles — atoms, molecules, organisms, recipes, and templates. Composable by nature.
Eddie isn't just a component library — it's the shared design language across everything Brad Frost Web builds. The system spans design tokens, web components, icons, and product-specific recipes that power real products.
See the entire Eddie universe — every package, consumer project, relationship, and connection — in one interactive visualization.
Explore the products Eddie powers: bradfrost.com, the Atomic Design course, AI & Design Systems course, and consulting tools.
80+ web components from buttons and headings to complex organisms like accordions, modals, and heroes.
A comprehensive three-tier token system covering colors, typography, spacing, borders, shadows, and more.
Code conventions, CSS patterns, component API naming, and accessibility standards for the whole team.
Five built-in themes — BFW, BFW Dark, BFW v9, Wowee Zowee, and We Are Here — with documented token tiers and accent conventions.