@freshworks/crayons

@freshworks/crayons

Crayons is a library of UI components that help create an intuitive and uniform user interface for all your apps. This collection of Web components helps developers build apps that adhere to the UX standards set by the Freshworks Design System.

These components are designed to be used in traditional frontend view libraries/frameworks or on their own through traditional JavaScript in the browser.

Features

• Tiny, highly optimized components built with Stencil
• No build or compiling required
• Simply add the static files to any project
• Tree shakable bundle for components
• Lazy-loaded components without configuration
• Style customisation through CSS Variables
• Framework Wrappers for React

Usage

HTML

Easiest way to start using Crayons is by adding a script tag to the CDN. More details here

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@freshworks/crayons/dist/crayons/crayons.esm.js"
></script>
<script
  nomodule
  src="https://cdn.jsdelivr.net/npm/@freshworks/crayons/dist/crayons/crayons.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@freshworks/crayons/css/crayons-min.css"
/>

Any Crayons component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as document.createElement('fw-button').

Framework Bindings

The @freshworks/crayons package can be used in simple HTML, or by vanilla JavaScript without any framework at all. Crayons also provides framework bindings that make it easier to integrate Crayons into a framework such as React. (However, at the lowest-level framework bindings are still just using Crayons core and Web Components).

To use React wrapper use below:

import { FwButton } from '@freshworks/crayons/react';

For more information please check here

Naming Components

When generating components, the custom element tags is prefixed with fw- while the rest of the name is modified to support web component standards. For example, if a component is generated with the name Label, the component name would be <fw-label>.

How to contribute

Check out the CONTRIBUTE guide

---

Built with ❤ at Freshworks