@suphark/ui Design System & Showcase

Living Component Showcase, Foundations, Patterns & Web Interface Guidelines

shadcn/ui base-novaTailwind v4Base UI
@suphark/ui Design SystemNext.js App RouterTailwind v4shadcn/uiWeb Interface Guidelines

ภาพรวมระบบการออกแบบและมาตรฐาน UI ของทุกแอป

ศูนย์กลางมาตรฐานการออกแบบและการประกอบคอมโพเนนต์สำหรับทุกแอปของ Suphark (Pi Auth, DueBell, Pi PDF, supplychain) เน้นความกระชับ สแกนง่าย รองรับงานประจำวันที่มีข้อมูลหนาแน่น (Operational Density) ผสาน 4 เสาหลัก: Web Interface Guidelines, shadcn/ui Primitives,Frontend Design & UX Copy, และ Redesign Safety Workflow

ค้นหาคอมโพเนนต์และคู่มือ

พิมพ์ชื่อคอมโพเนนต์, Token, Pattern หรือ Rule ที่ต้องการค้นหา

Jump to

สถาปัตยกรรม 4 เสาหลัก (The 4 UI Pillars)

ทุกหน้าจอและฟีเจอร์ใน codebase นี้ต้องสอดคล้องกับหลักการทั้ง 4 ด้านอย่างเคร่งครัด

Baseline
1. Web Interface Guidelines
Mandatory Baseline Standard

มาตรฐานการเข้าถึง (A11y), Keyboard Navigation, Focus Rings, Accessible Labels, Error Recovery และ Motion Accessibility ตาม Vercel Web Interface Guidelines

Visible focus rings (focus-visible:ring-2)
Icon buttons have aria-label / sr-only
Dialogs/Sheets require accessible Title & Description
Clear error guidance without user-blame
60+ Primitives
2. shadcn/ui Primitives
Source-Owned UI Architecture

คอมโพเนนต์พื้นฐานที่ครอบคลุมทั้ง UI และ Base UI ผสมผสานผ่าน Tailwind v4 Semantic Tokens และ Composition-first pattern

FieldGroup + Field for unified forms
InputGroup for icons & embedded actions
Button loading with Spinner + data-icon
Items strictly within their Group containers
User Voice
3. Frontend Design & UX Voice
Intentionality & Copywriting

การออกแบบที่เจาะจงกับแอปงานภายในของ Suphark การจัดลำดับสายตา ความกระชับสแกนง่าย และภาษา UX ที่เน้นสิ่งที่ผู้ใช้ควบคุมได้ (Active Voice)

Dense & scannable operational density
Active voice actions ('Save changes', not 'Submit')
Action-to-toast consistency ('Publish' -> 'Published')
Empty states as invitations to act
Safety
4. Redesign Workflow
Behavior-Preserving Evolution

ระเบียบการปรับปรุง UI โดยคงความสามารถเดิม 100% เช่น RBAC Permissions, Data Contracts, Routes, Server Actions, Filters, และ Pagination

Preserve server action guards & auth contracts
Preserve URL search params & filter states
Preserve loading skeletons & empty fallbacks
Zero-regression verification plan

กติกางานออกแบบระดับระบบ (System Design Rules)

ข้อควรปฏิบัติและข้อห้ามสำหรับการสร้างและแก้ไข UI ใน codebase นี้

✓ สิ่งที่ต้องทำ (Do)

  • ใช้ FieldGroup และ Field เป็นโครงสร้างฟอร์มเสมอ
  • ใช้ flex flex-col gap-* หรือ grid gap แทน space-x/y
  • ใส่ aria-label ใน icon-only button ทุกตัวโดยไม่มีข้อยกเว้น
  • ใช้ size-* เมื่อความกว้างและความสูงเท่ากัน (เช่น Avatar, Icon box)
  • เตรียม 3 สถานะข้อมูลเสมอ: Ready, Loading Skeleton, และ Empty State ที่มี CTA

✕ สิ่งที่ต้องหลีกเลี่ยง (Avoid)

  • •ห้ามใช้ raw color utility เช่น bg-blue-500 หรือ text-red-500 ในระบบงานจริง
  • •ห้ามกำหนด arbitrary pixel font sizes เช่น text-[10px] หรือ text-[9px]
  • •ห้ามใส่ manual z-index บน overlay (Dialog, Sheet, Popover จัดการเอง)
  • •ห้ามแก้ไขไฟล์ใน src/components/ui/* โดยตรงโดยไม่ได้รับอนุญาต
  • •ห้ามสร้าง Dialog หรือ Sheet โดยไม่มี Title และ Description สำหรับ Screen Reader