Other generated assets

Besides components, Plasmic also generates other useful assets that you need to use in your application.

Global variants

Global variants are represented in the generated code as React contexts.

If your components make use of global variants, you can provide the activated global variant value using the generated context provider. Usually you can do this at the root of your React tree to cover all components rendered across your application, though you can also specify different global variant values for different sections of the product — it’s just a React context, and you can just use it as such.

For example, here’s how you might use a Theme global variant to toggle between dark and light:

export default function MyPage(){
  return (
    <PlasmicRootProvider globalVariants={[{name: 'Theme', value: 'light'}]}>
      ....
    <PlasmicRootProvider />
  );
}

The Screen global variant

The Screen global variant is used to create responsive designs triggered by breakpoints. This enables Plasmic to express variations beyond what can be achieved in CSS media queries, and enable arbitrary rendering changes.

This global variant is special because it is automatically provided by Plasmic where needed.

Icons

All the SVG icons that you have in Plasmic are automatically generated as React components. You can use them as you would use any icon library:

By default, these icon components are sized to be 1em, with fill / stroke colors set to currentColor, so you can size them using the font-size css property, and color them using the color css property, just as you can with similar icon libraries — except they are your icons!

Style tokens

See syncing style tokens

Have feedback on this page? Let us know on our forum.