Skip to main content

acui Documentation

Welcome to the acui (LLM Platform User Interface) component library documentation. acui is a React-based component library built on Chakra UI, designed to provide a consistent, accessible, and themeable UI framework for the LLM Platform LLM ecosystem.

Overview​

acui offers:

  • A comprehensive set of reusable React components for common UI patterns.
  • Customizable theming based on Chakra UI, supporting LLM Platform branding.
  • Responsive design and accessibility compliance (WCAG).
  • Built-in dark mode support.
  • TypeScript support for improved developer experience.
  • Components tailored for dashboards, agents, workflows, model outputs, and observability.

Installation​

npm install @ac/acui
# or
yarn add @ac/acui

Usage​

React Applications​

import React from 'react';
import ReactDOM from 'react-dom';
import { acuiProvider, Button } from '@ac/acui';

function App() {
  return (
    <acuiProvider>
      <Button colorScheme="primary">Click Me</Button>
    </acuiProvider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Drupal Integration​

acui components can be integrated into Drupal projects. See the drupal directory documentation for setup instructions.

Available Components​

  • Buttons
  • Cards
  • Form elements
  • Layout components
  • Typography components
  • Dashboard-specific components for agents, workflows, and observability

Theme Customization​

Customize the theme by passing a customTheme prop to acuiProvider:

import [acuiProvider] from '@ac/acui';
import [extendTheme] from '@chakra-ui/react';

const customTheme = extendTheme({
  colors: {
    primary: {
      500: '#007bff',
    },
  },
});

function App() {
  return <acuiProvider customTheme={customTheme}>[/* Your app content */]</acuiProvider>;
}

Utilities and Hooks​

Hooks​

  • useBreakpoint(): Get the current breakpoint.
  • useTheme(): Access theme values and utilities.

Utilities​

  • Color manipulation functions.
  • Style utilities.
  • Responsive helpers.

Development​

Setup​

git clone [email protected]:acui.git
cd acui
npm install
npm run dev

Build​

npm run build

Testing​

npm test

Accessibility​

acui components are built with accessibility in mind, following WCAG guidelines and tested with tools like Axe.

Performance Optimization​

Strategies include code splitting, lazy loading, and memoization to optimize performance in data-heavy dashboards.

Internationalization​

Document how acui supports i18n and l10n for multi-language applications.

CI/CD Pipeline​

Uses BFCIComponents for linting, testing, building, and publishing to package registries.

Versioning and Release Process​

Follows semantic versioning with automated release processes.

License​

MIT License