Components 101

Manage components in your design system.

What is a component?

Components are the building blocks in a design system. They consist of a collection of the smaller aspects of design elements — buttons, checkboxes, and inputs for example — which are used in UX and design patterns throughout your brand or product. These components are guided by internal principles and are continually being managed and updated to maintain consistency across a wide range of applications.

There are often separate (and sometimes disparate) sets of components in designs and in code that must be balanced or maintained independently. Supernova is designed to bring all of this component data into one place, which can then be translated directly into documentation — the crucial guide to how everything comes together.

What you can do with components in Supernova:

  • Create a master list of the components in your design system
  • Connect directly to information from different sources (for example, Figma or GitHub)
  • Manage progress and statuses for many properties in a single view
  • Link a component to a documentation page (either in Supernova or from a custom URL)
Component view anatomy

Component view anatomy

Properties

Add row

  • Adds a row to create a new component

Filter

  • Filters the components and properties

New component

New property

Component

  • The component row and all of its properties