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.
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
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
npm install @freshworks/crayons@next --save
<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>