The fastest way to create a styleguide

Keep your team in sync with a styleguide automatically generated from your design system.

Developer Handoff

Goodbye handoff. Hello Styleguide.

No more static components. No more useless code. Styleguide replaces "developer handoff" with a production-ready design system.

Zero set-up

Styleguides are automatically generated from your Modulz design system. No set-up required.

Blazing fast

Styleguides are built on Gatsby and for optimised for blazing fast performance.

Always in sync

Styleguide keeps your design and engineering teams in sync with a single source of truth.

Features

A fully-featured styleguide. Out of the box.

Zero set-up. Just hit "publish", we'll handle the rest.

Name

label

side

sideOffset

align

alignOffset

arrowOffset

Type

string

oneOf

number

oneOf

number

number

Default

none

top

10

center

10

10

Props table

Automatically generated component API docs, so developers can implement your design system.

<Button size={2} variant"blue">
Button
</Button>

<Button size={2} variant"green">
Button
</Button>

Live code editor

A live playground for testing and experimenting with your components. Out of the box.

WYSIWYG editor

Predefined templates to flesh out your styleguide content with usage docs, brand guidelines and more.

Radix is currently under heavy development, but can be installed by running either of these commands:
npm install @modulz/radix
or
yarn add @modulz/radix

NPM Publishing

Publish your design system directly to NPM, so your engineers can hit the ground running.

"Of all the startups I've invested in, I struggle to remember one producing quality product as fast as Modulz."

CColm Tuite
Des Traynor
14 Aug 2019

Version 2.3.5

Minor
This release includes canvas rulers, guides, and general improvements.
Show release notes
14 Aug 2019

Version 2.3.5

Minor
This release includes canvas rulers, guides, and general improvements.
Show release notes
19 Aug 2019

Version 2.3.6

Minor
Nothing to see here. Just a few minor visual tweakz to one of our shadows.
Show release notes
19 Aug 2019

Version 2.3.5

Major
Lots of breaking changes. Removed a bunch of components which are used commonly throughout the product.
Show release notes

Insertions

Button
Textarea
Progress Bar

Deletions

Slider
Meter
Date Picker
18 Aug 2019

Version 2.3.4

Minor
Not much to see here. Just a few minor visual tweakz to our new badge component.
Show release notes
17 Aug 2019

Version 2.3.3

Minor
This release includes an additional shadow in our theme. No breaking changes.
Show release notes

Versioning

Advanced versioning so you stay in control

Keep your whole team synced on your design system's progress.

Release notes

Leave detailed release notes to inform teammates about insertions, deletions and updates.

Rollbacks

In case of an emergency, you can restore your design system to a previous version.

Change log

Track changes to your design system. See who is working on which components and when.

Feature overview
Modulz Styleguide provides fully-featured design system documentation for teams who need total control.

Password protection

Set a password to keep your styleguide private.

Custom domain

Add a professional touch to your styleguide with a custom domain.

Versioning

Track every version of your design system.

Self-hosting

We provide cloud-hosted and self-hosted options.

Asset manager

A centralised hub to store your logo, icons and brand assets.

Content blocks

Use predefined templates to design a flexible structure for your styleguide content.

Join our beta program
Our beta program will begin in November. We're primarily targeting teams. Applications will be screened based on fit.
© Modulz, Inc
Product
Theme
Editor
Composer