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 docsLearn how to get up and running with Pattern Lab, work with patterns, design with dynamic data, and use Pattern Lab's advanced features.
DemosDemos of pattern starterkits for your project as well as a gallery of Pattern Lab projects in the wild
ResourcesLinks 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!
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.
Pattern Lab doesn't impose any tools or libraries on you, which means you have full control over how author your project.
Use atomic design language, or don't! it's totally up to you how you name, structure, and organize your Pattern Lab project.
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.
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.