BEMed Components

React Component Primitives for Humans inspired by the Block Element Modifier convention

JAVASCRIPTCreate your own legos

const Link = bemed({
  name: "TutorialLink",
  as: "a",
  mods: {
    awesome: true
  },
  elements: {
    Icon: bemed({
      as: ReactSVGIcon,
      className: "react-colors",
      mods: {
        playAnimation: true,
      }
    }),
  },
});

JSXBuild awesome stuff

<Link awesome href="/tutorial">
  <Link.Icon playAnimation={clicked} />
  Get started!
</Link>

HTMLGet human readable HTML out

<a class="TutorialLink TutorialLink--awesome"
   href="/tutorial">
    <svg class="
        TutorialLink__Icon
        TutorialLink__Icon--playAnimation
      "  />
    Get started!
</a>