Home

Backpack Components

Backpack is a set of GUD5 compliant UI components for use on the web. It is the de-facto implementation of the Backpack Design kit (opens in a new tab), and focused on:

  • Mobile first: Since the vast majority of EF traffic is now coming from handheld devices, we have rebuilt the components touch-first.
  • Accessibility: All components are AA compliant and easy to navigate with keyboard and assistive technologies.
  • Themability: We have made it easy to theme components with css variables or any css-in-js library.

What's in it?

Backpack consists of 5 packages:

    1. Backpack UI. Our UI components package both for use directly in React projects and in our Storyblok Site Builder.
    1. Backpack Assets. Up-to-date icon svgs, logo svgs, flag svgs and Lottie files for our animated academicons.
    1. Backpack Site Builder. Our full site building solution which combines all the other packages.
    1. Create Backpack App. CLI tool for scaffolding out backpack apps with Typescript/Vite, Nextjs or our fully integrated site builder tool.
    1. Backpack SB Plugins. Our set of storyblok plugins which make it easy for designers to build websites.
Get Started