Question 1

How do I use Crayons with React?

Accepted Answer

Install the core package and use the provided React wrapper by importing components as per the framework documentation on the Crayons website. This wrapper handles prop binding and event handling to integrate smoothly with React's ecosystem.

Question 2

Can I use Crayons for non-Freshworks projects?

Accepted Answer

While possible due to its web component foundation, Crayons is optimized for Freshworks' design system, so using it elsewhere may require extensive CSS overrides and feel mismatched compared to general-purpose libraries.

Question 3

Does Crayons support server-side rendering (SSR)?

Accepted Answer

As web components built with StencilJS, Crayons can support SSR with proper configuration, but you'll need to set up hydration in your framework, such as React, for optimal performance, as noted in StencilJS documentation links.

Question 4

Crayons vs Material-UI for Freshworks apps?

Accepted Answer

Crayons is tailored specifically for Freshworks' design compliance, ensuring out-of-the-box consistency, whereas Material-UI requires custom theming to match Freshworks standards, adding development overhead.

Question 5

How to customize Crayons components' styling?

Accepted Answer

Customization is limited to CSS variables and shadow DOM techniques to maintain design integrity; refer to the Crayons website for theming guidelines, but expect constraints to avoid breaking UX standards.

Question 6

What frameworks are supported besides React?

Accepted Answer

Currently, only React has an official wrapper; for other frameworks like Vue or Angular, you must use the web components directly or build custom wrappers, which can increase project complexity.

Crayons

What is Crayons?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions