Minted Component Library

UX, Design
Image 1

As Minted Wedding Websites moved from the legacy Hitched Up app to React, it gave me to opportunity to create a responsive component library from the ground up. This library has allowed our team build consistently, launch new features at a faster pace, and reduce internal miscommunication.

The building blocks are broken down into four categories:

Foundation

Foundation contains the abstract properties such as font definitions, colors, grid structure, and spacing.

Elements

Elements contain all the individual pieces of the interface, such as icons, buttons, tabs, and form controls. Most elements are built so that the width is controlled by the parent container, and they can not contain any external spacing.

Components

Components are groups of Elements that form distinct sections of the interface, such as the main navigation, modal window, or a sortable content list. They can respond to page breakpoints, and can specify external spacing.

Templates

Templates consist mostly of Components, but occasionally Elements. They represent the layout and functionality of a specific page type.

Pages

Pages are instances of Templates, with placeholder content replaced with real content. They are the closest representation of what the user will see, and provide a way to test the integrity of the building blocks.

Image 2
Image 3
Image 4
Image 5

I've learned so much throughout the process of designing this library, probably the most important is that it's never complete. As new functionally is added to our app, Pages are used to test and improve components. Many times that has uncovered a flaw in an element that required improvements that would cascade throughout the system. Breaking elements down to their simplest form, and using Pages to test integrity are key in ensuring modularity.

Other insights I've learned include: understanding how size variants affect composability, rules for internal and external spacing, component testing using Pages, and a set of guidelines for symbol and layer organization and naming conventions.

Even though maintaining a component library can be tricky, it has certainly helped to improve our workflows and internal communication. Check out the next project to see it in use.