Skip to main content

Getting started with the UI library for PhariaAI applications

The Aleph Alpha UI library provides a robust set of components for developing PhariaAI applications. This guide will help 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()],
})

Step 1: Instrument 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...
  }
}

Step 2: 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>

Step 3: Explore the UI Library Documentation​

Click here to open the docs in a new tab