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:
Variants corresponding to component states. A component may be in different “states” — a
Button
can be disabled, aSelect
can be opened and closed, aCheckbox
can be checked. Your component should have variants that correspond to each of these states. Some of the variants are optional — for example, aButton
can 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
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.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!