Design System

Nova Design System

หน้าทดสอบคอมโพเนนต์ OPUS UI ทั้งชุดที่โปรเจกต์นี้ใช้ — กด ⌘ K เพื่อเปิด command palette

ปุ่ม 8 แบบ, ฟอร์มครบชุด, ตารางเรียงได้, ปฏิทินไทย, Toast แจ้งเตือน

ปุ่ม · ป้าย · ตัวโหลด

ครบทุก variant และขนาดที่โปรเจกต์ใช้

Button

8 variants · 7 sizes · loading ที่ความกว้างคงที่

Badge · Tag · Avatar · Spinner

สถานะที่อ่านออกในพริบตา

defaultsecondaryoutlinesoftsuccesswarningdestructiveinfogradient

primaryปิดได้

ปศกเ

ABC+2

ฟอร์มและตัวกรอกข้อมูล

Field จะผูก id, aria-describedby และ aria-invalid ให้เอง

Input · Textarea · Field

อีเมลที่ทำงาน

✉

อีเมลต้องมีเครื่องหมาย @

ชื่อโปรเจกต์

.nova.app

รายละเอียดการปล่อยงาน

0 / 160

ตัวเลือกและสวิตช์

ภูมิภาค

ค้นหาโปรเจกต์

จำนวนที่นั่ง

งบประมาณต่อเดือน

แจ้งเตือนทุกครั้งที่ปล่อยงาน

ปิดพรีวิวอัตโนมัติใน 7 วัน

แท็กของโปรเจกต์

thaitypeedge

ตัวเลื่อนและตัวเลือกแบบการ์ด

วันที่และไฟล์

Calendar รองรับคีย์บอร์ดเต็มรูปแบบ · locale ไทย

วันเริ่มใช้

ช่วงเวลารายงาน

ตุลาคม 2569

จัอัพุพฤศุเสอา

ลากไฟล์มาวาง หรือกดเพื่อเลือกรับ PNG, JPG และ PDF ไม่เกิน 2 MB ต่อไฟล์ (ไฟล์จะไม่ถูกอัปโหลดจริง)

โอเวอร์เลย์และการแจ้งเตือน

Dialog ใช้ <dialog> จริง ทุ่มโฟกัสให้เอง · Esc ปิดได้

Dialog · Sheet · Popover · Tooltip

Alert · Toast · Progress · Skeleton

มีเวอร์ชันใหม่

v4.6 พร้อมใช้งานสำหรับทุกโปรเจกต์ในทีม

โดเมนพร้อมใช้งาน

www.siamdesign.co.th ผูกสำเร็จแล้ว

build ล้มเหลว

finflow-app · main · ไม่พบไฟล์ app/page.tsx

72%

ตารางและข้อมูล

DataTable เรียงได้ เลือกแถวได้ และมี empty state ในตัว

รายการโปรเจกต์
	Region	สถานะ
nova-site	sin1	READY	38
nova-docs	hnd1	READY	26
siamdesign	sin1	BUILDING	12

1–3 of 4

1 / 2

build วันนี้

312

8.4%

เวลาเฉลี่ย

38 วิ

6.2%

สำเร็จ

99.2%

0.3%ย้อนหลัง 24 ชั่วโมง

รอในคิว

12.5%

Carousel

สไลด์ที่ 1

สไลด์ที่ 2

สไลด์ที่ 3

สไลด์ที่ 4

Timeline · AnimatedList

รับ webhook
0.2 วิ
build 14 หน้า
24 วิ
ปล่อยขึ้น edge
5 วิ

Purge cache สำเร็จ

โครงสร้างหน้าและเมนู

Tabs · Accordion · Breadcrumb · Pagination · Tree · Descriptions · Empty

Tabs และ Accordion

แท็บใช้ตัวบ่งชี้แบบเลื่อน ย้ายด้วยลูกศรได้

ใช้ grid-rows ในกาารอนิเมตความสูง จึงไม่กระตุกตอนเปิด/ปิด

ได้ ตั้ง type="multiple" แล้วเปิดพร้อมกันได้

Tree · Breadcrumb · Pagination

nova-sitemain
app/
page.tsx3.2 KB
components/opus/64 ไฟล์
nova-docsmain
finflow-appพักอยู่

Dropdown · Context menu · Popconfirm

คลิกขวาที่พื้นที่นี้เพื่อทดสอบ context menu

Descriptions · Empty · Spotlight/Shimmer

โปรเจกต์: nova-site
branch: main
commit: 9f2c41b
ปล่อยเมื่อ: 2026-10-11 14:02

ยังไม่มี snapshot

กดปล่อยงานครั้งแรก แล้ว snapshot จะปรากฏที่นี่

SpotlightCard

แสงวิ่งตามเมาส์ทั้งใบ

จบการทดสอบ

คอมโพเนนต์ทั้งหมดโหลดจาก OPUS UI registry

ไฟล์อยู่ใน components/opus — แก้ไขได้ตามต้องการ ไม่มีแพ็กเกจ npm เพิ่มนอกจาก clsx และ tailwind-merge