Skip to content
ZenAdmin Tech

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.

About ZagJS

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.

Documentation

For detailed documentation and usage guidelines, visit ZagJS Documentation.

Using ZagJS in Charizard

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.

Benefits of Using ZagJS

  • 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.

Best Practices

  • 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.