Create atomic design systems with Pattern Lab

Pattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.

Run the following command in your terminal and read the installation guide to get started:

npm create pattern-lab
  • Read the docs

    Learn how to get up and running with Pattern Lab, work with patterns, design with dynamic data, and use Pattern Lab's advanced features.
  • Demos

    Demos of pattern starterkits for your project as well as a gallery of Pattern Lab projects in the wild
  • Resources

    Links to articles and resources around Pattern Lab and design systems

Pattern Lab features

At its core, Pattern Lab is a Node-powered static site generator that stitches together UI components. But there's a whole lot more to it than that!

  • Nested Patterns

    Include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern and immediately see those changes reflected anywhere it is included.

  • Design With Dynamic Data

    Create living UI prototypes using dynamic data to ensure your components can handle the dynamic nature of your content.

  • Tool Agnostic

    Pattern Lab doesn't impose any tools or libraries on you, which means you have full control over how author your project.

  • Language Agnostic

    Use atomic design language, or don't! it's totally up to you how you name, structure, and organize your Pattern Lab project.

  • Pattern Documentation

    Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.

  • Viewport Resizer Tools

    Pattern Lab includes viewport resizing tools to ensure your design system's components and pages are fully responsive.

  • Pattern Lineage

    X-ray vision! Quickly view where patterns where components are used, speeding up design, development, and QA time.

  • Pattern Starter Kits

    Start your Pattern Lab project with a blank slate, a few sample components, or a full-on demo project.

  • Flexible and Extensible

    Pattern Lab supports Handlebars and Twig templating engines. Also you can or build a plugin to extend Pattern Lab's capabilities even further.

Open source and community driven

Pattern Lab is (and will always be) an open source project. Check out the project on GitHub and join the Pattern Lab Gitter community for conversation and support.