ข้ามไปเนื้อหา
WhereUI

ค้นหาในเอกสาร

ค้นหาชื่อ component หรือหน้าเอกสาร

แนะนำ

เอกสารการใช้งาน WhereUI

WhereUI คืออะไร

WhereUI คือ UI kit กลางของ WHT สำหรับ project React / Next.js สร้างบน shadcn/ui (Base UI) และ Tailwind CSS v4 หน้าตามาจาก design system ของ WeBuilder

ไม่ใช่ npm package แต่เป็น registry แบบ shadcn — ติดตั้งแล้ว code ของ component เข้าไปอยู่ใน project ของคุณ จึงแก้ไขต่อได้เองเต็ม ๆ

จุดเด่น

ธีมครบทั้งสองโหมด

โทน slate + ฟ้าน้ำเงินตัวเดียว มีสีสถานะ success/warning/info พร้อมคู่ -soft และเงา 3 ระดับ กำหนดค่าที่เดียวใน globals.css

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

ฟอนต์ IBM Plex Sans Thai ขนาดฐาน 15px line-height 1.65 กันสระและวรรณยุกต์ชนบรรทัด ตัวเลขและวันที่อ่านง่าย

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

control ทุกชนิดมีพื้นที่กดขั้นต่ำ 44px บนจอสัมผัสโดยอัตโนมัติ (มือถือและ LIFF) โดยไม่ต้องแก้ component

registry แบบ shadcn

ติดตั้งด้วย pnpm dlx shadcn add แล้ว code เข้าไปอยู่ใน project ของคุณ อ่านแก้ปรับแต่งได้เอง ไม่ล็อกเวอร์ชัน

สลับโหมดได้ทุกที่

ใช้ next-themes ตามระบบของผู้ใช้เป็นค่าเริ่มต้น สลับด้วยปุ่มหรือกด D ได้จากทุกหน้า

การรองรับ

  • React 19 / Next.js App Router / Tailwind CSS v4
  • จอกว้างสุด 375px ใช้งานได้ทุกหน้า
  • คีย์บอร์ดใช้งานได้ครบ พร้อม focus ring ทุก interactive element
  • โหมดสว่าง/มืดทำงานผ่าน design token อัตโนมัติ

ขั้นต่อไป