Pattern Book
Why should a pattern library have an web server?
Why should a pattern library need to be told which styles you use?
Why can't a pattern library work with your existing components?
npm install pattern-book yarn add pattern-book

A pattern library designed to be easier to maintain

Q. What is a Pattern Library?

A pattern library, also known as a style guide, is a way of showing example usage of HTML and CSS for components (React components, or plain HTML).

When sites comprise different technologies or are very large then having this example usage can help achieve design consistency.

Q. How can I make patterns for an existing website?

One of the advantages of Pattern-Book is that it autodetects the CSS Rules being applied to your HTML, so you can put your production site's CSS files on the page and then write HTML to use them and Pattern-Book will do the rest. It will only display the relevant CSS (no need to manually associate CSS with a particular component). This means that it's hopefully a lot less effort to repurpose your existing CSS as a pattern library.

Pattern-Book supports whitelists and blacklists of CSS to help show the relevant styles.

Q. This is a pattern library so where's the dev webserver?

Great question.

pattern-book doesn't include a dev server because other projects do it better.

So just use Create-React-App or, add <Book>` tags to a new page in your app, or use whatever boilerplate you like.

Q. How does pattern-book arrange the page of patterns... with headings, accordions, tabs, or what?

Imagine if your pattern library had 5 components then it probably should be designed quite differently to another library with 1000 components, so this software is intentionally unopinionated about organisation. pattern-book just renders the component preview itself so decide for yourself how to organise them (do try react-accessible-accordion though!).

It doesn't organise them, so design it however you want!


Who's using it? / Demo

You? Tweet me to be added


Use pattern-book from NPM.

See for usage.



The background book tile graphic designed by Freepik

The software by Matt Holloway ( @hollowaynz) thanks to