Palette Plugin

The Floro Palette Plugin is easiest to demonstrate & learn with video (see the demo video below). If you already know how the plugin works, please feel free to continue to the integration instructions.

Integrating Palette

We currently have integration documentation and instructions for React and React Native projects. While our React documentation uses Remix and Next for the example apps, most of the logic can be easily ported to any other React or React SSR project. Remix has far better (optimized) SSR support than Next, if you are looking to add support to an Express/React, we would strongly recommend using the Remix Demo for reference.

Despite only having Javascript integration instructions, Floro & the Theme Plugin are programming language & runtime agnostic. For custom integrations, you can use the {theme generator} we use in both demos or write your own custom generator.

Please use the Demo Repositories to find references to the platform specific APIs.

Features & Benefits

  • Standardize & centralize colors
  • Get Type-Safe colors
  • Allow designers to manager your color palette.
  • Universal API makes your palette easily portable to DAM systems.
  • Make rebrands a breeze - When you centralize your palette & themes, updating your palette takes minutes rather than months.
  • Way easier to make sense of than hex-codes when developing.

Demo Video

The majority of the documentation can be found in the Github demo repositories shown above. This video is meant to show the general development flow of working with the Palette Plugin. However, the API details depends on the specific platform Floro is being used in.