បណ្ណាល័យ UI ដំបូងគេដែលបង្កើតឡើងសម្រាប់អក្សរខ្មែរ។ React + Tailwind CSS រួមជាមួយ 19 components ឥតគិតថ្លៃ និង font Battambang ភ្ជាប់មកជាមួយ។
The first React + Tailwind CSS component library built for Khmer script. 19 free components with embedded Battambang font — no external requests.
សាកល្បង components ផ្ទាល់ — មិនចាំបាច់ដំឡើងTry components live, no install needed
Dashboard + Sidebar + DataTable + Charts + Dark Mode — រចនាប័ទ្មពេញលេញជាភាសាខ្មែរ
import { Button } from '@khmerui/core'; <Button variant="primary">រក្សាទុក</Button> <Button variant="danger" size="sm">លុប</Button>
<Input label="ឈ្មោះ / Name" placeholder="បញ្ចូលឈ្មោះ" error="មិនត្រឹមត្រូវ" />
14 components ឥតគិតថ្លៃ + Pro features សម្រាប់ $19/ឆ្នាំ។
ទិដ្ឋភាពទូទៅនៃអាជីវកម្មរបស់អ្នកនៅថ្ងៃនេះ — Dashboard overview content goes here.
គ្រប់អ្វីដែលអ្នកត្រូវការដើម្បីចាប់ផ្តើមEverything you need to get started
Install @khmerui/core, configure Tailwind, and build your first component in 2 minutes.
Button, Input, Select, Textarea, Checkbox, Radio, Switch, Avatar, Card, Modal, Badge, Alert, Tabs, Tooltip, Dropdown, Typography, Navbar, Sidebar, Footer
Angkor Gold, Mekong Blue, Lotus Pink — Khmer-optimized typography and Tailwind plugin.
មើលគម្រូពេញលេញ — Dashboard, Sidebar, DataTable, Charts, Dark Mode ជាភាសាខ្មែរ
Built-in Khmer + English translations. 40+ translation keys ready to use.
$19/year Cambodia. Buy via Bakong KHQR. Instant delivery via email.
19 ឥតគិតថ្លៃ + 8 Pro modules — ទាំងអស់មាន Khmer typography19 Free + 8 Pro modules — all with Khmer typography support
6 variants (primary, secondary, outline, ghost, danger, success), 5 sizes, loading state, icons
Labels, error states, hints, left/right addons, Khmer placeholder support
Native select with custom Khmer-optimized styling and error handling
4 variants (default, bordered, elevated, flat), header/body/footer, hoverable
5 sizes, ESC close, overlay click, footer actions, scroll lock
6 colors, dot indicator, 3 sizes — perfect for status labels
Info, success, warning, danger — with dismiss button and icons
3 variants: underline, pills, bordered — controlled and uncontrolled
4 positions (top, bottom, left, right), configurable delay
Menu items with icons, dividers, danger actions, click-outside close
h1-h4, body, caption, overline — Khmer font toggle, muted variant
Responsive with mobile hamburger menu, sticky option, transparent mode
Collapsible, sections, active states, badges — full dashboard navigation
Multi-column layout, social links, copyright — responsive grid
Toggle switch — controlled/uncontrolled, 3 sizes, label + description
Multi-line text input — labels, error/hint, Khmer placeholder, resizable
Checkbox with label + description, 3 sizes, error state, disabled
Radio buttons — group with options array, vertical/horizontal layout
User avatar — image, name initials, 5 sizes, auto-generated colors from Khmer names
Sort, search, filter, pagination, row selection, loading state, striped rows, sticky header
Sidebar + header + content area, StatCards with trends, responsive grid
Login + Register pages with social providers, bilingual, error handling
Dynamic forms from config — text, email, select, textarea, checkbox, radio, validation
Bar chart + Donut chart — pure CSS, zero dependencies, animated
Side navigation, settings rows, section-based layout
5 Khmer-themed presets + dark mode toggle — Angkor, Mekong, Lotus, Cardamom, Phnom Penh Night
AppShell, PageHeader with breadcrumbs, ContentArea — 3 layout modes
តម្លៃសមរម្យសម្រាប់កម្ពុជា — បង់ប្រាក់តាម Bakong KHQRCambodia-friendly pricing — pay via Bakong KHQR
វិធី ៤ ជំហាន ដើម្បីប្រើ KhmerUI ក្នុងគម្រោងរបស់អ្នក4 steps to use KhmerUI in your project
បង្កើតឯកសារ .npmrc ក្នុង project folder របស់អ្នក:
# បង្កើតឯកសារ .npmrc ក្នុង project folder (ដំណើរការលើ Mac, Windows, Linux) echo @khmerui:registry=https://khmerui.kessor.net/npm/ > .npmrc
.npmrc ដោយផ្ទាល់ដែលមានខ្លឹមសារ: @khmerui:registry=https://khmerui.kessor.net/npm/
ដំឡើង package ចូលក្នុងគម្រោង React របស់អ្នក:
npm install @khmerui/core
📦 19 components + Battambang font ភ្ជាប់មកជាមួយ + Tailwind theme — ឥតគិតថ្លៃ MIT License
បន្ថែម KhmerUI plugin ក្នុង tailwind.config.ts និង import font ក្នុង app entry:
// tailwind.config.ts import { khmerUIPlugin, khmerUITheme } from '@khmerui/core'; export default { content: [ './app/**/*.{js,ts,jsx,tsx}', './node_modules/@khmerui/core/dist/**/*.{js,mjs}', ], theme: { extend: { ...khmerUITheme } }, plugins: [khmerUIPlugin()], };
// app entry (main.tsx, layout.tsx, _app.tsx) import '@khmerui/core/fonts.css'; // Battambang font — មិនត្រូវការ Google Fonts
Import components ហើយចាប់ផ្តើមសរសេរកូដ:
import { KhmerUIProvider, Button, Input, Card } from '@khmerui/core'; function App() { return ( <KhmerUIProvider locale="km"> <Card> <Input label="ឈ្មោះ" placeholder="បញ្ចូលឈ្មោះ" /> <Button>រក្សាទុក</Button> </Card> </KhmerUIProvider> ); }
# បន្ទាប់ពីទទួល npm token តាម email: echo '//khmerui.kessor.net/npm/:_authToken=YOUR_TOKEN' >> ~/.npmrc # ដំឡើង Pro: npm install @khmerui/pro # ប្រើក្នុង code: import { setLicenseKey } from '@khmerui/pro'; setLicenseKey('KUI-PRO-XXXX-XXXX-XXXX'); import { DataTable, DashboardLayout, StatCard } from '@khmerui/pro';
សិស្ស/និស្សិត: $9/ឆ្នាំ · បង់តាម ABA, ACLEDA, Wing, Bakong, Pi Pay