@hipaymn/miniapp-ui-library

React components for HiPay mini apps.

Install

yarn add @hipaymn/miniapp-ui-library

Peer dependencies: React 19, React DOM 19, and React Router 7.

Setup

Import the stylesheet once, and wrap the app with BrowserRouter and ToastProvider. Header uses React Router, so it must render inside a router.

import { BrowserRouter } from "react-router-dom";
import { ToastProvider } from "@hipaymn/miniapp-ui-library";
import "@hipaymn/miniapp-ui-library/style.css";

export function App() {
  return (
    <BrowserRouter>
      <ToastProvider>
        <YourScreen />
      </ToastProvider>
    </BrowserRouter>
  );
}

The theme font is Manrope. It is loaded by the stylesheet.

Layout

Layout fills the screen. header stays at the top and footer stays at the bottom.

import { Button, Header, Layout } from "@hipaymn/miniapp-ui-library";

<Layout
  header={<Header title="HiPay" />}
  footer={<Button text="Continue" variant="secondary" className="w-full" />}
>
  <p>Screen content</p>
</Layout>

Header props:

| Prop | Description | | --- | --- | | title | Centered title. Required. | | isArrowLeft | Shows the back button. Defaults to true. | | handleBack | Called when the back button is pressed. | | leftIcon | Image URL for the button on the right. | | handeClickLeftIcon | Called when that button is pressed. |

Button

The standard button is 48px tall with a 24px corner radius. secondary uses the dark gradient, a 20px drop shadow, and a 40px background blur.

<Button text="Continue" variant="secondary" className="w-full" onClick={submit} />
<Button text="Saving" variant="primary" loading className="w-full" />
<Button text="Back" variant="transparent" isRightIcon={false} />

variant is "primary", "secondary", or "transparent". A white arrow shows on the right by default. Set isRightIcon={false} to hide it, or rightIconColor="black" for the dark arrow. loading keeps the label and shows Spinner beside it. leftIcon and rightIcon are image URLs.

ghost, outline, default, destructive, and link are also available for icon and text buttons that do not use the HiPay label and arrow.

Input

Boxed field with a floating label. Pass currency to show a symbol in front of a grouped amount. onChange still receives the raw digits, such as "20000".

<Input label="Үнийн дүн" currency="₮" value={amount} onChange={handleAmount} />
<Input label="Утасны дугаар" editable error="Буруу дугаар" />

label is optional. editable shows a pencil icon. rightIcon replaces that icon.

MainInput

Underline field. onChange receives the string value.

<MainInput
  label="Утас"
  value={phone}
  prefix={<span>+976</span>}
  onChange={setPhone}
/>

<MainInput label="Нууц үг" isPassword value={password} onChange={setPassword} />
<MainInput label="Нэр" value={name} error="Буруу утга" onChange={setName} />

The label sits on the line when the field is empty, and moves above the border when the field is focused or filled. labelAlwaysOnTop keeps it above the border. isLoading shows a spinner.

Toast

Call useToast() inside ToastProvider.

const { show } = useToast();

show.success("Payment successful", 3000);
show.error("Payment failed");
show({ message: "Check the amount", variant: "warning", title: "Анхааруулга" });

show.success, show.error, show.warning, and show.info take a message and an optional duration in milliseconds.

Spinner

<Spinner />
<Spinner size="large" color="#22272C" />
<Spinner size={24} animating={false} />

size is "small", "large", or a pixel number. The default color is #FF3B63.

Other components

The package also exports the rest of the UI set, including Tabs, Sheet, Dialog, Calendar, Select, Card, and Sidebar. Import them from the package root:

import { Sheet, SheetContent, SheetTrigger, Calendar } from "@hipaymn/miniapp-ui-library";

Local preview

yarn dev
yarn build