Skip to content

Utilizing ZagJS in Charizard UI Library

Charizard, our UI library, incorporates ZagJS for its robust, state machine-powered UI primitives. ZagJS provides a collection of framework-agnostic UI component patterns, which are essential in building efficient and scalable design systems.

ZagJS offers a unique approach to UI component development:

  • State Machine-Driven: Utilizes Finite State Machines (FSMs) to model the states and interactions of UI components.
  • Framework-Agnostic: Compatible with major front-end frameworks like React, Vue, and Solid.js.
  • Design System Friendly: Ideal for building consistent and maintainable design systems.

For detailed documentation and usage guidelines, visit ZagJS Documentation.

ZagJS components are integrated into Charizard to enhance its capability as a UI library. These components are used as building blocks for complex UI patterns.

  • Predictable State Management: FSMs provide a predictable and organized way to handle component states.
  • Reusability: Components are reusable across different projects and frameworks.
  • Reduced Complexity: Simplifies the logic of complex UI components.
  • Understanding FSMs: Developers should have a basic understanding of Finite State Machines.
  • Component Composition: Use ZagJS components as the basis for further customization and complex compositions.
  • Consistent Theming: Ensure that the theming of ZagJS components is consistent with the overall design system of Charizard.