@pancake-pos/ui

React components matching the pos-* elements of Worker UI (PosSection, PosTable, PosStat…), the Pancake POS antd theme and design tokens, and PosProvider for iframe pages of POS apps.

import { PosProvider, PosPage, PosSection, PosMoney, usePos } from '@pancake-pos/ui';

createRoot(document.getElementById('root')!).render(
  <PosProvider>
    <App />
  </PosProvider>,
);

function App() {
  const pos = usePos();
  return (
    <PosPage heading="Debts">
      <PosSection heading={pos.shop.name}>
        <PosMoney value={1250000} />
      </PosSection>
    </PosPage>
  );
}

Charts: import { PosChart } from '@pancake-pos/ui/chart' (needs recharts). Without React or antd: @pancake-pos/ui/tokens.css, @pancake-pos/ui/tailwind.css (Tailwind 4), @pancake-pos/ui/tailwind-preset (Tailwind 3), @pancake-pos/ui/fonts.css.

Docs: https://pos.pages.fm/developers/apps/en (English), https://pos.pages.fm/developers/apps (Tiếng Việt). For AI tools: https://pos.pages.fm/developers/apps/llms-full.txt.

Part of Pancake POS Apps. Use is limited to building apps for Pancake POS.