Plume Component System

Plume is a component system by Plasmic.

The Plume component system is not a specific set of pre-designed components that you can use, or even a set of pre-built components that you can theme. Instead, it allows you to design new components for your design system from scratch in Plasmic, just the way you want them, and then turns them into fully functional and accessible React components via a set of React hooks. It brings your designs to life.

As an example, there are countless ways to design a slider. No matter how you design yours, by attaching Plume Slider behavior, you can easily bring your design to life, fully accessible—all with a single React hook.

Examples of slider designs

How it works

To use Plume, you would:

  1. Design a Plume component using the Plasmic UI.
  2. Generate the presentational React code as usual.
  3. Use Plume React hooks in your component file to bring interactivity and accessibility to your component.
  4. Use your resulting Plume components in your application.

How to learn

This documentation site is divided into three sections:

  1. How to design Plume components. This section talks about how to design each Plume component in Plasmic, including the expected anatomy of each component and relevant component states. This is most relevant to folks who are designing your components.

  2. How to build Plume components. This section talks about how to take the components designed in Plasmic, and use the Plume hooks to make them come to life. This is most relevant to folks who are building your design system components.

  3. How to use Plume components. This section talks about the API of the resulting React components that have been produced by the prior steps. This is most relevant to folks who are consuming your design system components in building out the greater application.

Installation

Once you are set up to generate code from your Plasmic designs, you just need to install the Plume package to get started:

npm install @plasmicapp/plume