shadcn/ui (Base UI) + Tailwind CSS v4

UI kit ภาษาไทยสำหรับงานของเรา

WhereUI คือ UI kit กลางของ WHT — ติดตั้งแบบ registry แล้ว code ของ component เข้าไปอยู่ใน project ของคุณ รองรับโหมดสว่าง/มืด ฟอนต์ไทย และจอสัมผัสตั้งแต่ในธีม

เริ่มใช้งาน ดู 84 component

84 component · 12 หมวด · โหมดสว่าง/มืด

component เด่น

Button

ปุ่มหลักของระบบ มี 6 variant และขนาดรองรับตั้งแต่ xs ถึง lg รวมถึงปุ่มไอคอนสำหรับแถบเครื่องมือ

Card

การ์ดจัดกลุ่มเนื้อหาหนึ่งเรื่อง เช่น สรุปคำขอกู้ มีส่วนหัว คำอธิบาย มุมปุ่มการกระทำ เนื้อหา และแถบท้าย พร้อมขนาด sm สำหรับรายการกระชับ

คำขอกู้ ก-2542

ผู้ยื่น: น้ำใจ · ผู้อนุมัติ: ปี่

รออนุมัติ

วงเงิน 150,000 บาท ผ่อน 36 เดือน เพื่อการศึกษาบุตร

คำขอกู้ ก-2543

ผู้ยื่น: กู้ · ผู้อนุมัติ: น้ำใจ

ตีกลับ

วงเงิน 80,000 บาท ผ่อน 24 เดือน

Badge

ป้ายสถานะเล็ก ๆ กำกับรายการ เช่น รออนุมัติ ตีกลับ ฉบับร่าง เปลี่ยนสีตาม variant และใส่ไอคอนหรือทำเป็นลิงก์ได้

รออนุมัติฉบับร่างเอกสารตีกลับโปร่งใสดูทั้งหมด

รอพิจารณา 3 วันทำการเปิดรายละเอียดคำขอ

Tabs

แท็บสลับมุมมองเนื้อหาในหน้าเดียวกัน มีสองแบบคือแท็บปกติ (default) และแท็บขีดเส้นใต้ (line) ใช้ลูกศรเลื่อนแท็บได้

มีคำขอลารออนุมัติ 4 รายการ รวม 9 วันทำการ

ทำไมต้อง WhereUI

โหมดสว่าง/มืด

ธีมมาครบทั้งสองโหมด ทุก component ใช้ design token เดียวกัน

ออกแบบให้ภาษาไทย

IBM Plex Sans Thai ขนาดฐาน 15px และ line-height 1.65 กันสระชนบรรทัด

พร้อมจอสัมผัส

ปุ่มและช่องกรอกมีพื้นที่กดขั้นต่ำ 44px บนมือถือและ LIFF อัตโนมัติ

สีและเงาเป็น token

สีสถานะ success/warning/info พร้อมคู่ -soft และเงา 3 ระดับ

registry แบบ shadcn

ติดตั้งด้วยคำสั่งเดียวแล้ว code อยู่ใน project ของคุณ แก้ได้เอง

หมวดหมู่

ปุ่มและการกระทำ

ดู component ในหมวดนี้

ฟอร์ม

ดู component ในหมวดนี้

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

ดู component ในหมวดนี้

ไฟล์

ดู component ในหมวดนี้

การนำทาง

ดู component ในหมวดนี้

ชั้นซ้อน

ดู component ในหมวดนี้

แจ้งผล

ดู component ในหมวดนี้

แสดงข้อมูล

ดู component ในหมวดนี้

กราฟ

ดู component ในหมวดนี้

โครงหน้า

ดู component ในหมวดนี้

ตัวอักษร

ดู component ในหมวดนี้

เฉพาะงานของเรา

ดู component ในหมวดนี้