បណ្ណាល័យ UI ដំបូងគេដែលបង្កើតឡើងសម្រាប់អក្សរខ្មែរ។ React + Tailwind CSS រួមជាមួយ components គ្រប់គ្រាន់ដើម្បីបង្កើតផលិតផល SaaS។
សាកល្បង components ផ្ទាល់ — Try components live, no install needed
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, Card, Modal, Badge, Alert, Tabs, Tooltip, Dropdown, Typography, Navbar, Sidebar, Footer
Angkor Gold, Mekong Blue, Lotus Pink — Khmer-optimized typography and Tailwind plugin.
DataTable, Dashboard, Charts, FormBuilder, Auth Pages, Settings, ThemeSwitcher, Layout System
Built-in Khmer + English translations. 40+ translation keys ready to use.
$19/year Cambodia. Buy via Bakong KHQR. Instant delivery via email.
14 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
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
Cambodia-friendly pricing — បង់ប្រាក់តាម Bakong KHQR
វិធី ៣ ជំហាន ដើម្បីប្រើ KhmerUI ក្នុងគម្រោងរបស់អ្នក
រត់ command នេះម្តងក្នុង terminal របស់អ្នក ដើម្បីភ្ជាប់ទៅ KhmerUI registry:
echo '@khmerui:registry=https://khmerui.kessor.net/npm/' >> ~/.npmrc
ដំឡើង package ចូលក្នុងគម្រោង React របស់អ្នក:
npm install @khmerui/core
📦 14 components + Khmer typography + Tailwind theme — ឥតគិតថ្លៃ MIT License
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