v1.0 — កម្ពុជាដំបូង / Cambodia First

KhmerUI

The UI System That Speaks Khmer

បណ្ណាល័យ UI ដំបូងគេដែលបង្កើតឡើងសម្រាប់អក្សរខ្មែរ។ React + Tailwind CSS រួមជាមួយ components គ្រប់គ្រាន់ដើម្បីបង្កើតផលិតផល SaaS។

ទាញយកឥតគិតថ្លៃ / Get Free មើល Demo

Live Component Demos

សាកល្បង components ផ្ទាល់ — Try components live, no install needed

Buttons FREE

import { Button } from '@khmerui/core';

<Button variant="primary">រក្សាទុក</Button>
<Button variant="danger" size="sm">លុប</Button>

Inputs FREE

សូមបំពេញឈ្មោះពេញ
អ៊ីមែលមិនត្រឹមត្រូវ / Invalid email
<Input
  label="ឈ្មោះ / Name"
  placeholder="បញ្ចូលឈ្មោះ"
  error="មិនត្រឹមត្រូវ"
/>

Badges & Alerts FREE

Primary Active Expired Pro Draft
ℹ️ សូមអាប់ដេតគណនីរបស់អ្នក
✓ រក្សាទុកបានជោគជ័យ!
⚠ License ផុតកំណត់ក្នុង ៣០ ថ្ងៃ

Cards FREE

ផលិតផល KhmerUI
បណ្ណាល័យ React UI សម្រាប់ខ្មែរ

14 components ឥតគិតថ្លៃ + Pro features សម្រាប់ $19/ឆ្នាំ។

Tabs FREE

ទិដ្ឋភាពទូទៅ
អតិថិជន
វិភាគ
ការកំណត់

ទិដ្ឋភាពទូទៅនៃអាជីវកម្មរបស់អ្នកនៅថ្ងៃនេះ — Dashboard overview content goes here.

Stat Cards PRO

ចំណូល / Revenue
$3,800
↑ 18.2% ខែមុន
អតិថិជន / Users
284
↑ 12 ថ្មី
Churn Rate
2.3%
↓ 0.5%
MRR
$1,214
↑ 22%

DataTable PRO

ឈ្មោះ / Name អ៊ីមែល គម្រោង / Plan ចំណូល ស្ថានភាព
សុខ សំណាង samnang@example.com Pro $49 Active
Chan Dara dara@startup.kh Enterprise $499 Active
Sok Pisey pisey@agency.com Pro $19 Active
វណ្ណ ដារា vann@corp.kh Free $0 Churned
បង្ហាញ 1-4 នៃ 4 ធាតុ

ឯកសារ / Documentation

Everything you need to get started

គ្រប់ Components

14 Free + 8 Pro modules — all with Khmer typography support

🔘

Button

6 variants (primary, secondary, outline, ghost, danger, success), 5 sizes, loading state, icons

📝

Input

Labels, error states, hints, left/right addons, Khmer placeholder support

📋

Select

Native select with custom Khmer-optimized styling and error handling

🃏

Card

4 variants (default, bordered, elevated, flat), header/body/footer, hoverable

🪟

Modal

5 sizes, ESC close, overlay click, footer actions, scroll lock

🏷️

Badge

6 colors, dot indicator, 3 sizes — perfect for status labels

⚠️

Alert

Info, success, warning, danger — with dismiss button and icons

📑

Tabs

3 variants: underline, pills, bordered — controlled and uncontrolled

💬

Tooltip

4 positions (top, bottom, left, right), configurable delay

📂

Dropdown

Menu items with icons, dividers, danger actions, click-outside close

🔤

Typography

h1-h4, body, caption, overline — Khmer font toggle, muted variant

🧭

Navbar

Responsive with mobile hamburger menu, sticky option, transparent mode

📌

Sidebar

Collapsible, sections, active states, badges — full dashboard navigation

🦶

Footer

Multi-column layout, social links, copyright — responsive grid

PRO Advanced Modules

📊

DataTable

Sort, search, filter, pagination, row selection, loading state, striped rows, sticky header

📐

Dashboard Layout

Sidebar + header + content area, StatCards with trends, responsive grid

🔐

Auth Pages

Login + Register pages with social providers, bilingual, error handling

📝

FormBuilder

Dynamic forms from config — text, email, select, textarea, checkbox, radio, validation

📈

Charts

Bar chart + Donut chart — pure CSS, zero dependencies, animated

⚙️

Settings Page

Side navigation, settings rows, section-based layout

🎨

Theme Switcher

5 Khmer-themed presets + dark mode toggle — Angkor, Mekong, Lotus, Cardamom, Phnom Penh Night

🏗️

Layout System

AppShell, PageHeader with breadcrumbs, ContentArea — 3 layout modes

តម្លៃសមរម្យ / Simple Pricing

Cambodia-friendly pricing — បង់ប្រាក់តាម Bakong KHQR

Free / ឥតគិតថ្លៃ
$0
forever / រហូត
  • 14 core components
  • Khmer typography system
  • Tailwind theme + plugin
  • Basic i18n (km/en)
  • MIT License
npm install
Most Popular
Pro / ប្រូ
$19/ឆ្នាំ
🇰🇭 Cambodia pricing (~77,900 KHR)
  • Everything in Free
  • DataTable + search/sort/filter
  • Dashboard + StatCards + Charts
  • Login & Register pages
  • FormBuilder + Settings
  • Theme switcher + dark mode
  • Layout system
  • 1 year updates
ទិញ Pro / Buy Pro
Enterprise / សហគ្រាស
Custom
from $199/year 🇰🇭
  • Everything in Pro
  • Unlimited seats
  • White-label system
  • Priority support (24hr)
  • Custom development
ទាក់ទង / Contact

ចាប់ផ្តើមឥឡូវនេះ / Get Started Now

Install the free core — no account needed

npm install @khmerui/core
// 1. Install
npm install @khmerui/core

// 2. Use in your React app
import { KhmerUIProvider, Button, Input, Card } from '@khmerui/core';

function App() {
  return (
    <KhmerUIProvider locale="km">
      <Card>
        <Input label="ឈ្មោះ" placeholder="បញ្ចូលឈ្មោះ" />
        <Button>រក្សាទុក</Button>
      </Card>
    </KhmerUIProvider>
  );
}