Beta Logo

Beta Admin

  • แดชบอร์ด
  • คลังวิดีโอ
  • สมาชิก
  • UI Showcase

Component Demo

Typography

แบบอักษร H1–H3, Body, Caption และสีข้อความ

Noto Sans Thai

ก ข ฃ ค ฅ ฆ ง จ ฉ ช ซ ฌ ญ ฎ ฏ ฐ ฑ ฒ ณ ด ต ถ ท ธ น บ ป ผ ฝ พ ฟ ภ ม ย ร ล ว ศ ษ ส ห ฬ อ ฮ

1234567890

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

abcdefghijklmnopqrstuvwxyz

Sarabun

ก ข ฃ ค ฅ ฆ ง จ ฉ ช ซ ฌ ญ ฎ ฏ ฐ ฑ ฒ ณ ด ต ถ ท ธ น บ ป ผ ฝ พ ฟ ภ ม ย ร ล ว ศ ษ ส ห ฬ อ ฮ

1234567890

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

abcdefghijklmnopqrstuvwxyz

IBM Plex Sans

ก ข ฃ ค ฅ ฆ ง จ ฉ ช ซ ฌ ญ ฎ ฏ ฐ ฑ ฒ ณ ด ต ถ ท ธ น บ ป ผ ฝ พ ฟ ภ ม ย ร ล ว ศ ษ ส ห ฬ อ ฮ

1234567890

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

abcdefghijklmnopqrstuvwxyz

H1 - Heading 1

H2 - Heading 2

H3 - Heading 3

Body 1 - Body text 1

Body 2 - Body text 2

Caption - Caption text

Hello World - Light text

Hello World - Normal text

Hello World - Semibold text

Hello World - Bold text

Text - xs

Text - sm

Text - base

Text - lg

Text - xl

Text - 2xl

Text - 3xl

Text - 4xl

Text - 5xl

Text - 6xl

Text - 7xl

Text - 8xl

Text - 9xl

Text Color

text-text-primary

text-text-secondary

text-text-tertiary

text-text-inverse

text-text-accent

text-text-disabled

text-neutral-100

text-neutral-300

text-neutral-500

text-primary-100

text-primary-300

text-primary-500

text-primary-700

text-primary-900

text-error-100

text-error-300

text-error-500

text-error-700

text-error-900

text-success-100

text-success-300

text-success-500

text-success-700

text-success-900

text-info-100

text-info-300

text-info-500

text-info-700

text-info-900

text-warning-100

text-warning-300

text-warning-500

text-warning-700

text-warning-900

text-foreground

text-muted-foreground

text-primary

text-primary-foreground

text-destructive

text-tab-primary

Colors

พาเลตสี primary, error, success, info, warning (100–900)

bg-primary-100
bg-primary-300
bg-primary-500
bg-primary-700
bg-primary-900
bg-oat-100
bg-oat-300
bg-oat-500
bg-oat-700
bg-oat-900
bg-clay-100
bg-clay-300
bg-clay-500
bg-clay-700
bg-clay-900
bg-espresso-100
bg-espresso-300
bg-espresso-500
bg-espresso-700
bg-espresso-900
bg-lime-100
bg-lime-300
bg-lime-500
bg-lime-700
bg-lime-900
bg-coral-100
bg-coral-300
bg-coral-500
bg-coral-700
bg-coral-900
bg-error-100
bg-error-300
bg-error-500
bg-error-700
bg-error-900
bg-success-100
bg-success-300
bg-success-500
bg-success-700
bg-success-900
bg-info-100
bg-info-300
bg-info-500
bg-info-700
bg-info-900
bg-warning-100
bg-warning-300
bg-warning-500
bg-warning-700
bg-warning-900
bg-neutral-100
bg-neutral-300
bg-neutral-500
bg-neutral-700
bg-neutral-900

InputField

ช่องกรอก label, hint, error, leftIcon, sizeBox, disabled, readOnly

Basic

Number only

0/13

With hint & required

ใช้สำหรับติดต่อเท่านั้น

With error


รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร

With left icon

With right icon

Sizes

States

with leading text

https://

with left label

Website

TextArea

TextArea รับ label, placeholder, hint, value, onChange, disabled, readOnly

This is a hint text to help user.

Disabled state

Readonly state

Something went wrong.

Button

ปุ่ม variant (default, outline, ghost, link, destructive), size และ icon

Filled

Outline

link

Sizes

With Icons

Disabled

Company Tabs

Tabs component ใช้ Tabs + useState สำหรับสลับ tab (activeTab, onChange)

General

เนื้อหาส่วน General — ข้อมูลทั่วไปของบริษัท

Company Logo

CompanyLogo รับ wordmarkText, customMark, wordmarkClassName, logoMarkProps

Default logo and wordmark

LOGONAME

Default logo and wordmark

LOGONAME

Change wordmark

logo
Beta

Change logo and wordmark

Company Badge

Badge แสดง size, color, icon (label, size, color, leftIcon, rightIcon, withIcon)

Default (gray)

Default sm
Default md
Default lg

Color variations

Gray
Info
Success
Warning
Error

With icons

Star Right
Star Both
Custom Icon
Warning

Custom color hex / RGB

Custom Blue
Violet
Teal

Size comparison

Small
Medium
Large

Icon only (no label)

Label
Label
Label

Infobox

กล่องข้อความแจ้งเตือน/ข้อมูล (primary-50 + ไอคอน Info)

Default

นี่คือข้อความแจ้งเตือนหรือข้อมูลเพิ่มเติมสำหรับผู้ใช้ สามารถใช้แสดง hint หรือคำอธิบายได้

Short message

กรุณาตรวจสอบข้อมูลก่อนส่ง

Multiple infoboxes

ข้อความแจ้งเตือนแรก — ใช้ primary-50 background กับไอคอน Info

ข้อความแจ้งเตือนที่สอง — เหมาะสำหรับรายการคำแนะนำหรือข้อควรระวัง

Dropdown

DropdownField single/multi, searchable, tag mode, clearable

Single select

เลือกได้ 1 รายการ

Single with clear

Multi select (tags)

เลือกได้สูงสุด 5 รายการ

Searchable

With error / disabled

กรุณาเลือกอย่างน้อย 1 รายการ

Left Icon

Left Dot

Table

ตาราง Table, TableHeader, TableBody, TableRow, TableHead, TableCell

ตารางพื้นฐาน

สินค้า A
PD-26010001
จำนวน
100
สถานะ
พร้อมจำหน่าย
สินค้า B
PD-26010002
จำนวน
50
สถานะ
หมด
สินค้า C
PD-26010003
จำนวน
200
สถานะ
พร้อมจำหน่าย
รหัสสินค้า
ชื่อสินค้า
จำนวน
สถานะ
PD-26010001
สินค้า A
100
พร้อมจำหน่าย
PD-26010002
สินค้า B
50
หมด
PD-26010003
สินค้า C
200
พร้อมจำหน่าย

DatePicker

เลือกวันที่และเวลา (DatePicker, showTime, readOnly)

เลือกวันที่ (อย่างเดียว)

วันที่

เลือกวันที่ + เวลา

วันที่และเวลา

Read only

วันที่ (อ่านอย่างเดียว)

Range

disablePastDates = truerequired = true

Range (Read only)

Navbar / Header

Header รับ title, buttonName, buttonIcon, onButtonClick

Header / Navbar

หน้าหลัก

Header โดยไม่มีปุ่ม (hasPermission = false)

หน้ารายงาน

Popup Menu

Dropdown Menu เมนูแบบ popup (Radix DropdownMenu)

Modal

BaseModal รับ open, onOpenChange, title, ปุ่มตกลง/ยกเลิก

Modal พื้นฐาน

Modal พร้อมปุ่มตกลง/ยกเลิก

Mobile Filter

ปุ่มตัวกรองสำหรับ mobile เปิด full-screen overlay พร้อม children form และปุ่มล้าง/ยืนยัน

(แสดงเฉพาะ mobile — ย่อหน้าต่าง browser เพื่อดู)

ปุ่มตัวกรองแสดงเฉพาะ mobile (< sm) — ย่อหน้าต่าง browser เพื่อดู