UI and tokens

import '@times/aip-sdk/tokens.css';
import { Button, EmptyState, Page } from '@times/aip-sdk';

tokens.css defines OKLCH CSS variables (--background, --foreground, --primary, --border, --radius and more). The host sends the active theme in the init payload and the SDK writes those variables, so your UI follows light, dark and every merchant palette.

PrimitivesCopy Anchor Link

<Page title={t('home.title')}>
  {invoices.length === 0 ? (
    <EmptyState title={t('home.empty')} />
  ) : (
    <InvoiceTable rows={invoices} />
  )}
  <Button onClick={sendReminders}>{t('home.send')}</Button>
</Page>

React is an optional peer dependency. Vanilla bundles can use the tokens without the primitives.

Design rulesCopy Anchor Link

• Use the token variables. Do not hard code colors.
• Keep layouts usable at 360px wide.
• Show loading states for every network call.