The user interface of apps that are to be published on the Freshworks Marketplace should be consistent with our Freshworks' products' UI. We do not enforce this but it is highly recommended for better user experience.
To build a UI consistent with our products, you can use Crayons, our UI design library. Through pre-built components, Crayons offers control and flexibility to build rich interfaces consistent with Freshworks product design and experience.
For automatic light/dark theme support, see Use the DEW design system.
Use the DEW design system
FDK apps support the DEW theme. Once you add the DEW CSS, your app automatically follows the product's light or dark theme. You do not need additional theme-handling code for the basic use case.
To set up DEW theme support, use the steps for your app type.
For React and meta framework apps, install the DEW packages and import the DEW CSS.
Install @freshworks/dew-styles and @freshworks/dew-components using npm:
npm install @freshworks/dew-styles @freshworks/dew-componentsImport the DEW CSS in your app entry file:
import '@freshworks/dew-styles/dist/dew-assets.css';
Sync light and dark theme
Once the DEW CSS is added, your app automatically follows the product's light or dark theme. No additional theme-handling code is required for the basic use case.
Developer reference
For component APIs, usage examples, and design guidelines, see the DEW component library documentation.
For design tokens and theme variables, see the DEW Theme documentation.