Skip to main content

Creating custom web components

This guide describes creating custom web components for the Acuitas medical imaging platform using Lit.js and Vite with module federation support.

Overview​

Acuitas web components are self-contained, reusable UI elements that integrate seamlessly into the Acuitas medical imaging platform. They implement a standardised interface defined in the shared types and use the Acuitas design system for consistent styling.

Key features​

  • Standardised interface: All components implement the PluginProps interface.
  • Design system: Consistent styling using the Acuitas CSS framework, see Acuitas Design System.
  • Module federation: Remote loading and integration capabilities.
  • Modal support: Built-in full-screen/modal functionality.

Prerequisites​

Before you begin, ensure you have:

  • Node.js 18 or later installed.
  • A basic knowledge of TypeScript and web components.
  • An understanding of the Lit.js framework.
  • Access to the @acuitas/shared package.