Introducing the UI library for PhariaAI applications

The Aleph Alpha UI library provides a robust set of components for developing custom PhariaAI applications. This article helps you get started with instrumenting your application using the UI library and demonstrate how to use one of its components.


Prerequisites

The UI library uses UnoCSS for styling, which is already instrumented for you. You can check the uno.config.ts file for the configuration:

import { getDesignSystemContentPathConfig, presetAlephAlpha } from '@aleph-alpha/config-css'
import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons'
import { defineConfig } from 'unocss'

export default defineConfig({
  ...getDesignSystemContentPathConfig('vue'),
  presets: [presetAlephAlpha(), presetAlephAlphaIcons()],
})

Instrumenting the UI library

When you create your application using pharia-ai create, the UI library is already installed and instrumented in the application. You can find the following code in your main application file:

import AADesignSystem from '@aleph-alpha/ds-component-vue'

app.use(AADesignSystem)

Additionally, you can see the dependency in your ui/package.json file:

{
  "dependencies": {
    "@aleph-alpha/ds-components-vue": "^1.0.0",
    // ...other dependencies...
  }
}

Example: Using the button component

Here is an example of how to use the button component in your application:

<template>
  <div>
    <AaButton @click="handleClick">Click Me</AaButton>
  </div>
</template>

<script setup>
import { AaButton } from '@aleph-alpha/ds-components-vue'

function handleClick() {
  console.log('Button clicked!')
}
</script>