PhariaAI application UI development best practices

This guide explores the essential coding practices that can help your application work optimally within the PhariaAI ecosystem while maintaining a consistent user experience.

The Aleph Alpha UI library is indispensable; see Introducing the UI library for PhariaAI applications for an introduction, or the full UI library documentation.


Keeping your UI styles consistent

When styling your application, think of the design system as your foundation. Here’s how to work with it effectively:

Work with the design system, not against it

The UI library provides props that handle styling for you, ensuring consistency across all PhariaAI applications and reducing maintenance headaches.

Avoid overriding these key CSS properties:

  • font-family

  • font-size

  • color

  • background-color

When you need custom styles

Sometimes you do need to customise some styles. When you do, avoid making sweeping global changes. Instead, target only specific elements in your PhariaAI application.

Avoid broad CSS selectors

Global selectors cast too wide a net and can cause unintended consequences. They can accidentally break other parts of the application or conflict with the design system’s carefully crafted styles.

Avoid these selectors:

body { ... }
p { ... }
div { ... }
:root { ... }

Avoid the nuclear option

Avoid !important whenever possible. Instead, write more specific CSS selectors to achieve the styling you need.

Handling static assets

You may want to use images, fonts, or other static files from third-party libraries. However, when your PhariaAI application is integrated in PhariaAssistant, static assets that use relative paths can get lost. This can break your application’s functionality or appearance.

The solution is to 'inline' your static assets by adding ?inline to your import statements:

// This ensures the file gets bundled directly into your build
import StaticAsset from '<your-third-party-library>/build/<some-obscure-path>/static-file.json?inline'

This statement instructs the build process to include the file content directly in your bundle instead of keeping it as a separate file that might get lost.

To learn more about asset handling, see the Vite asset documentation.