Aqua Basis

Flexibility in Implementation

Aqua DS components, built with Stencil JS, are highly flexible and can be used in multiple ways depending on your project’s architecture.

<aside>

WebComponents

npm i @aqua-ds/web-components

Use Aqua components directly in plain HTML.

</aside>

<aside>

npm i @aqua-ds/vue

Works with Vue 3 using imports and Vite setup.

</aside>

<aside>

React

npm i @aqua-ds/react

Integrates seamlessly into React apps.

</aside>

<aside>

Angular

npm i @aqua-ds/angular

Compatible with Angular, supports ngModel.

</aside>

Features

TypeScript and Framework Compatibility

Aqua DS provides full TypeScript support across React, Vue, and Angular applications.

All component props are strongly typed, ensuring type safety and improving the developer experience.

For props with predefined values, we expose Enums that document and constrain available options, enforcing consistency and reducing runtime errors. Additionally, all data types used in the library are centralized and documented in a dedicated section

Data Types

Native Web Component Compatibility

Aqua DS can also be consumed directly as Web Components without wrappers via CDN or NPM. Compatibility depends on how each framework handles custom elements, and in some cases, you may need to apply additional configuration to ensure proper integration.

WebComponents

Framework Wrappers and Tree Shaking

Our dedicated libraries for Vue, Angular, and React are optimized with tree-shaking support, so only the components and features you use are included in the final bundle. This ensures lighter builds and better performance.

Each wrapper integrates seamlessly with the unique features of its framework:

Vue → reactive bindings, custom events, and slot compatibility.
Angular → decorators, event binding, and native directive mapping.
React → components behave like native React components.

This approach makes Aqua DS feel native in each ecosystem while maintaining modern optimization.

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

In Vue, Angular and in vanilla JavaScript/HTML (direct Web Component usage), props must be written in kebab-case (e.g., is-required, helper-text).
In React props should be written in camelCase (e.g., isRequired, helperText).

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.