Component integration guides

New to Atrium? Create your frontend with end-to-end integration, then add your first page. Each guide below explains the purpose, a minimal example, settings, behavior, and integration requirements. The production showcase at /components indexes the library. Expand Components in the sidebar to open each example at its own /components/<name> URL. The /forms page adds a complete validation workflow.

• Accordions.
• Alerts and toast notifications.
• Avatars.
• Badges and chips.
• Breadcrumbs.
• Buttons.
• Cards.
• Charts with ApexCharts.
• Dashboard grids.
• Data tables.
• Date and time picker with Flatpickr.
• Dialogs.
• Drawers.
• Dropdowns.
• Empty and error states.
• Form controls and validation.
• Icons with configurable Iconify collections.
• List groups.
• Loading indicators.
• Interactive maps.
• Metric cards.
• Lazy page outlets.
• Pagination.
• PDF viewer with PDF.js.
• Popovers.
• Progress and global page/API loading.
• Global search.
• Application shell, sidebar, and header.
• Tabs.
• Browser terminal for SSH gateways.
• Tooltips.
• Typography.
• Video player.
• Remote desktops with noVNC.

Shared conventions

• Use createAdmin once. It registers shared ui* providers and the translation stores.
• Place application code in your application repository and keep route templates modular.
• Use src/atrium only when changing the reusable package itself.
• Include public templates through uiRoot. The Vite plugin resolves this for workspace and installed packages.
• For custom page modules, export register(context) and declare the module in route metadata.
• Do not initialize Bootstrap JavaScript on Alpine-owned components.
• Native date-picker, PDF, chart, map, and console libraries load when their surface starts. They are not requested on ordinary dashboard navigation.
• Keep backend authorization and business rules in application services.
• Theme tokens apply across shared components. Remote desktop pixels belong to the remote system and are not recolored.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921