Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

Introduction to the components library

Aqua DS provides a set of components specifically designed to simplify the development of applications and digital products.

To ensure maximum compatibility, Aqua DS offers four library packages, each tailored to different frameworks and environments - enabling flexible and efficient integration across various tech stacks.

Aqua DS is built with flexibility in mind and provides full compatibility with the following technologies:

• Web Components (Vanilla HTML) – Use Aqua DS directly in standard HTML environments without the need for additional frameworks.
• Vue.js 3 – Seamless integration with Vue 3 applications, enabling reactive and component-based usage.
• React – Fully compatible with React, allowing for intuitive JSX usage and state management integration.
• Angular – Designed to work smoothly with Angular’s component architecture and lifecycle.

These compatibility layers ensure that Aqua DS can be adopted across diverse projects, regardless of the frontend framework in use.

🔧 Selecting the Appropriate Library

Aqua DS provides multiple library packages, each optimized for a specific framework or environment. To ensure proper integration and performance, select the package that matches your project's technology stack:

Available packages

<aside>

WebComponents

npm i @aqua-ds/web-components

Use Aqua components directly in plain HTML.

</aside>

<aside>

Vue 3

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>