Nunjucks Components in Eleventy & Storybook

The kinda-boring front end of an Eleventy project that demonstrates using Storybook with Nunjucks components.

Component examples

Here are two instances of a button component built using a single Nunjucks macro:

They’re injected into this page using the encapsulated component pattern:

{%- from "components/component.njk" import component -%}

{{ component( "button", {
    label: "Primary",
    primary: true,
    size: "large"
}) }}

Using Nunjucks macros for components is awesome, but you’re probably here because of the Storybook integration ☺️

See Using Storybook with Nunjucks components in Eleventy for a detailed walkthrough on how this site’s copy of Storybook is configured to work with Nunjucks macros
If you’d like to poke around this site’s Storybook, a static build is live on Netlify

Have a question? Running into trouble? Find a cool variation or improvement? Give me a shout!