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.
For your components designed in Plasmic to work with Plume hooks, you may need:
Variants corresponding to component states. A component may be in different “states” — a
Buttoncan be disabled, a
Selectcan be opened and closed, a
Checkboxcan be checked. Your component should have variants that correspond to each of these states. Some of the variants are optional — for example, a
Buttoncan optionally have a variant that shows a starting icon, if you care about having buttons like that — but many variants are essential.
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
Selectcomponent 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.
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
Buttoncomponent should have a slot for holding the button content, the start icon, and the end icon.
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!