Crayons
A library of web components for building Freshworks apps with a uniform, intuitive user interface.
What is Crayons?
Freshworks Crayons is a UI component library built with web components, designed specifically for developing apps within the Freshworks ecosystem. It provides a set of reusable, standardized components that ensure apps have a consistent and intuitive user interface aligned with Freshworks' design system. The library helps developers build apps faster while maintaining UX compliance.
Developers building applications for Freshworks platforms who need to create consistent, design-compliant user interfaces. It's particularly useful for teams integrating custom functionality into Freshworks products.
Developers choose Crayons because it offers a standardized, framework-agnostic component library tailored to Freshworks' design system, ensuring UI consistency across apps. Its use of web components and framework wrappers like React provides flexibility and easy integration into various development environments.
Overview
🖍️ Crayons - A UI Kit comprising of web components for building Freshworks Apps!
Use Cases
Best For
- Building custom Freshworks apps with a consistent user interface
- Developing Freshworks marketplace integrations requiring design compliance
- Creating reusable UI components for Freshworks platform development
- Teams needing a standardized component library across multiple Freshworks projects
- Integrating Freshworks design system into React-based applications
- Ensuring accessibility and UX consistency in Freshworks app interfaces
Not Ideal For
- Projects not integrated with Freshworks products or services
- Teams using frontend frameworks other than React without prepared wrappers
- Applications requiring a design language different from Freshworks' standards
- Rapid prototypes where generic UI libraries offer faster iteration without design constraints
Pros & Cons
Pros
Built with StencilJS using standard web components, ensuring interoperability across modern browsers and frameworks without vendor lock-in, as highlighted in the README.
Components adhere strictly to Freshworks Design System, guaranteeing consistent UX and reducing design debt for apps within the ecosystem.
Includes a dedicated React wrapper for seamless integration into React projects, simplifying adoption as documented on the Crayons website.
Separated into core, icons, and i18n packages using Lerna, allowing flexible installation and dependency management based on project needs.
Cons
Only provides an official wrapper for React; other frameworks like Angular or Vue require custom integration, adding complexity for non-React teams.
Strongly tied to Freshworks' design standards, making it less useful for projects outside this ecosystem and limiting design flexibility.
Full documentation is hosted externally on the Crayons website, which can be less accessible offline or if the site changes, unlike self-contained READMEs.
Frequently Asked Questions
Related Projects
Fluent UI Web ComponentsFluent UI web represents a collection of utilities, React components, and web components for building web applications.
Material Web ComponentsMaterial Design Web Components
FAST ComponentsThe adaptive interface system for modern web experiences.
UI5 Web ComponentsUI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.