@privageapp/customer-ui

React components, hooks, and contexts shared by Privage customer themes. Styled with Tailwind utilities — no component library dependency.

Install

npm install @privageapp/customer-ui

Peer dependencies you must also have installed:

react  react-dom  react-router  tailwind-merge
dayjs  jsbarcode  @line/liff  @tabler/icons-react

Tailwind setup — required

The components ship as Tailwind utility classes. If your Tailwind build does not scan this package, the classes are silently dropped — components render unstyled with no error and no warning.

Tailwind replaces content from a preset rather than merging it, so the scan path must go in your own content array. Import the ready-made glob, which resolves the installed package location for you:

// tailwind.config.cjs
const preset = require('@privageapp/customer-ui/tailwind-preset')
const uiComponentsContent = require('@privageapp/customer-ui/tailwind-content')

module.exports = {
  presets: [preset],
  content: [
    './index.html',
    './src/**/*.{ts,tsx}',
    uiComponentsContent, // required — scans the shipped components
  ],
}

The preset supplies the shared color tokens (shark-*, font-primary, coral-red-600, and friends); tailwind-content supplies only the scan path. Use the preset alone if you prefer to define your own palette.

If components come out unstyled, this is almost always the missing line.

Usage

import { Barcode, useResponsive } from '@privageapp/customer-ui'

function Card({ cardNo }: { cardNo: string }) {
  // 'unset' below 768px, otherwise 430 — keeps themes phone-width on desktop
  const { maxViewportWidth } = useResponsive()
  return (
    <div style={{ maxWidth: maxViewportWidth, margin: '0 auto' }}>
      <Barcode value={cardNo} />
    </div>
  )
}

What's included

Components — Barcode, CampaignConditionBadge, DateInput, ImageWithFallback, Input, LineLoginButton, Loader, ScrollToTop

Contexts — ThemeContextProvider and its hook, for runtime theming from a business theme config

Hooks — useClickOutside, useCopyToClipboard, useCountdown, useInView, useLineLiff, usePrevious, useResponsive, useTheme

Utils — color (alpha, darken, lighten, toHex, toRgb), date (dayjs with Thai locale + Buddhist era preconfigured, months, getMaxDaysInMonth, isLeapYear), campaign (getCampaignChecklist, getCampaignReasons), and parsing helpers (isNumericString, toCardIdWithNickname, copyToClipboard)

Notes

ESM-only. React 19 is required; all peers are external so your app owns a single copy of React.

License

MIT