# Overview

Freshworks Crayons is a library of UI components that are the building blocks to help create an intuitive and uniform user interface for all your apps. Crayons leverages the custom CSS properties to provide a default theme and style for the components. The default theme is to provide uniformity across all apps built for the Freshworks Marketplace. You can customize the CSS properties to build apps that are aligned with your design needs.

# Getting Started

# Usage via CDN

From your app’s root directory navigate to the app > template.html file and add the following scripts:

<script
  type="module"
  src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.esm.js">
</script>
<script
  nomodule
  src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.js">
</script>

You can now use the Crayons components just like how you would use any other html element.

Get Started
Show Code

You can use UNPKG to query specific versions in your app.

# Usage via Node Modules

  • Install the package
  npm install @freshworks/crayons --save
  • Put a script tag similar to this
<script src='node_modules/@freshworks/crayons/dist/crayons.js'></script>

in the head of your index.html

  • Now you can use the element anywhere in your template, JSX, html etc.

# Bleeding edge version

For a bleeding edge version(highly unstable), you can use the next tag.

npm install @freshworks/crayons@next --save

or

<script
  type="module"
  src="https://unpkg.com/@freshworks/crayons@next/dist/crayons/crayons.esm.js">
</script>
<script
  nomodule
  src="https://unpkg.com/@freshworks/crayons@next/dist/crayons/crayons.js">
</script>
Last Updated: 5/6/2020, 10:13:14 AM