Designing Plume Components

You have a lot of freedom over how you want to design your Plume components — including what elements, variants, and slots are part of your component. However, in order for the Plume hooks to work, your components to need to satisfy some constraints.

Plume Compatibility

For your components designed in Plasmic to work with Plume hooks, you may need:

1. Variants corresponding to component states. A component may be in different “states” — a Button can be disabled, a Select can be opened and closed, a Checkbox can be checked. Your component should have variants that correspond to each of these states. Some of the variants are optional — for example, a Button can optionally have a variant that shows a starting icon, if you care about having buttons like that — but many variants are essential.

2. Elements corresponding to important semantic parts of component. Some elements of a component are especially meaningful, receiving aria attributes for accessibility and event handlers for interactivity. These elements make up the “bones” of your component — for example, a Select component must have a root element, a trigger button element, a dropdown overlay element. These are minimum elements that your component must have, though of course you will have many more elements that make up your component.

3. Slots for content. Your component also must have certain slots that are usually filled with content from props or generated by Plume. For example, your Button component should have a slot for holding the button content, the start icon, and the end icon.

The rest is up to you

Besides the minimum constraints described for each component, the rest is entirely up to you. You can create as many additional variants, slots, or elements as you’d like to fulfill your design vision. Create more Button variants for different types and sizes, or add number indicators in your Slider, it’s all up to you!

Components