kay-hoi-ui

A modern React component & UI library tailored for web applications and GIS mapping interfaces.

📦 Installation

npm install kay-hoi-ui
# or
yarn add kay-hoi-ui
# or
pnpm add kay-hoi-ui

Peer Dependencies

Ensure your project has react and react-dom installed:

"peerDependencies": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

🚀 Getting Started

Import the CSS stylesheet in your main entry point (e.g. main.tsx, index.tsx, or App.tsx):

import 'kay-hoi-ui/style.css';

Then import and use components in your application:

import { Button, InputCustom, CheckBox, FormEngine, Tooltip } from 'kay-hoi-ui';

function App() {
  return (
    <div className="p-4 flex flex-col gap-4">
      <Tooltip content="Tooltip message" position="top">
        <Button onClick={() => alert('Clicked!')}>Click Me</Button>
      </Tooltip>
      <InputCustom placeholder="Enter text..." />
    </div>
  );
}

export default App;

🎨 Available Components

• Form Controls: Button, CheckBox, InputCustom, SelectCustom, SelectMultiCustom, TextAreaCustom, WrapLabel, DisableWrapper
• Dynamic Form: FormEngine, FieldRenderer, fieldRegistry
• Navigation & Layout: TabsCustom, TabMulti, FrameContainer, HoverOverlay, Divider, Dropdown, DropdownItem, MoreMenu
• Modals & Overlays: DialogContainer, Tooltip, TooltipAutoClose, PopupMarker, ExpireSessionDialog, LogoutDialog, NetworkWarningDialog
• Data Display: CustomTable, CustomTableV2, Loading, UploadFile, FileItem

🔨 Building the Package

To compile the library locally before publishing to NPM:

npm run build

This will run TypeScript declaration generation and Vite library bundling into ./dist/:

• dist/kay-hoi-ui.js (ES Module)
• dist/kay-hoi-ui.umd.cjs (UMD Module)
• dist/kay-hoi-ui.css (Styles)
• dist/index.d.ts (TypeScript types)