UI Component Reference

@datamagik/ui is the component library custom Vue apps are built from. It carries the platform's own brand tokens — generated from the same source the product uses, not copied — with self-hosted Archivo and IBM Plex, and it ships light and dark themes. @datamagik/shop-floor-vue adds the board components on top.

Every page below follows the same shape: what the component is in one sentence, what to use instead when it is the wrong choice, every state with a screenshot in both themes, and the full prop, event and slot tables generated from the component's own TypeScript rather than typed by hand.

The screenshots are captured from the live gallery running under the real sandbox CSP, so they show what an author actually sees — including the fonts loading.

Start with What an app can reach, and what wraps it, which maps each platform capability to the component that wraps it and the dm call behind it.