v0.5 · shadcn/ui + Motion + Solar

Ecsight UI

ชุดคอมโพเนนต์สำหรับสร้างเว็บแอปของทีม Ecsight — พื้นฐานจาก shadcn/ui เคลื่อนไหวด้วย spring ที่กระชับ ใช้ไอคอน Solar และรองรับภาษาไทยตั้งแต่ต้น

เริ่มต้นใช้งาน

วาง setup prompt แล้วบอกสิ่งที่อยากได้ — agent อ่านกติกา ติดตั้ง และสร้างหน้าให้ตามมาตรฐานของ Ecsight

Setup prompt

คัดลอกไปใช้กับ agent ของคุณได้เลย

ใช้ได้กับ AI agent ทุกตัวที่อ่านไฟล์และรันคำสั่งได้

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Gemini CLI
  • Windsurf
  • v0
  • และตัวอื่น ๆ
1

วาง setup prompt

ใน agent ที่เปิดอยู่ในโปรเจกต์ของคุณ — ใช้ได้ทั้งโปรเจกต์ใหม่และโปรเจกต์เดิม

Set up Ecsight UI in this project.

1. Read https://ui.1ecsight.com/design.md and follow it for all UI work in this project.
2. If components.json doesn't exist, run `npx shadcn@latest init` first.
3. Add the registry to components.json:
   "registries": { "@ecsight": "https://ui.1ecsight.com/r/{name}.json" }
4. Install the foundation: `npx shadcn@latest add @ecsight/foundation`
5. In the root layout, set <html lang="th" suppressHydrationWarning> and wrap the app in <Providers> from "@/components/providers".
6. Add this rule to the project's agent rules file (CLAUDE.md, AGENTS.md or .cursor/rules):
   For all UI work, follow https://ui.1ecsight.com/design.md. Install components only from the @ecsight registry (`npx shadcn@latest add @ecsight/<name>`) — never hand-roll components, other icon sets, or native browser controls.
7. Run the app, confirm it builds, then tell me what you changed.
2

ให้ agent จำกติกาไว้ใช้ทุกครั้ง

setup prompt จะเพิ่มบรรทัดนี้ให้เอง — หรือวางเองใน CLAUDE.md, AGENTS.md หรือ .cursor/rules

For all UI work, follow https://ui.1ecsight.com/design.md. Install components only from the @ecsight registry (`npx shadcn@latest add @ecsight/<name>`) — never hand-roll components, other icon sets, or native browser controls.

สี

Token เชิงความหมาย (semantic) ทั้งหมดอิงจาก --brand-h ตัวเดียว เปลี่ยนสีแบรนด์ได้ในที่เดียว

Aa ภาษาไทย
--background
Aa ภาษาไทย
--primary
Aa ภาษาไทย
--secondary
Aa ภาษาไทย
--accent
Aa ภาษาไทย
--muted
Aa ภาษาไทย
--destructive
Aa ภาษาไทย
--success
Aa ภาษาไทย
--warning
chart-1
chart-2
chart-3
chart-4
chart-5

ตัวอักษร

IBM Plex Sans + IBM Plex Sans Thai Looped (มีหัว อ่านง่ายในตารางข้อมูล) · Plex Mono สำหรับรหัสและตัวเลข

ภาพรวมยอดขาย Revenue overview

หัวข้อส่วน Section heading

เนื้อหาหลักขนาด 16px สำหรับย่อหน้า ระยะบรรทัด 1.65 เพื่อไม่ให้สระบน-ล่างชนกัน เช่น “ปิ่น ญาติ ฎีกา ฐาน ฤๅษี”

ข้อความรอง 14px — ใช้ใน UI ส่วนใหญ่ (label, cell, description)

ORD-24081 · ฿1,284,500.00 · 2026-09-30

Motion

Snappy spring 150–320ms · motion ต้องอธิบายการเปลี่ยนสถานะเสมอ ไม่ใช่เพื่อความสวยอย่างเดียว · เคารพ prefers-reduced-motion

spring.snappydefault · press, toggle, pop-in
spring.gentlelarge surfaces, layout
spring.bouncyicon swaps, checkmarks
ease.out · slowedge panels, progress, counters

ไอคอน Solar

Linear เป็นค่าเริ่มต้น สลับเป็น Bold เมื่อ active ผ่าน <Icon> · Bold Duotone เฉพาะ empty state

LinearDefault — everywhere
BoldActive / selected state
Bold DuotoneEmpty states, feature tiles
Line DuotoneDon't use
OutlineDon't use
BrokenDon't use

Components

46 คอมโพเนนต์ พร้อม motion — ติดตั้งทีละตัวผ่าน registry

Button
Actions. One primary per view.
Input
Single-line text field. Pair with Label above.
Input Group
Input with icon, text or button addons.
Textarea
Multi-line text field.
Field
Label + control + description + error, with validation state.
FormEcsight
react-hook-form + zod wired into Field; Thai validators in lib/validation.
Calendar
Month grid — พ.ศ. by default, Sunday-first, Arabic digits. Click the caption for a month/year grid; วันนี้ jumps back.
Date PickerEcsight
Typeable DateInput, DatePicker and DateRangePicker (presets incl. ปีงบประมาณ, hover preview, max span).
Label
Accessible label for form controls.
Select
Pick one option from a short list (≤ 12).
Combobox
Searchable select built from Popover + Command.
Checkbox
Independent on/off choices, multi-select.
Switch
Settings that apply immediately.
Radio Group
One choice from 2–5 visible options.
Toggle Group
Segmented control for views and ranges.
Dialog
Blocking confirmation or short focused task.
Sheet
Side panel for create/edit forms and details.
Dropdown Menu
Contextual actions behind a trigger.
Popover
Non-blocking floating content.
Tooltip
Short label for icon-only controls.
Tabs
Switch between peer views in one context.
Accordion
Collapsible sections — FAQs, advanced settings.
Card
Groups related content and actions.
Badge
Status and counts.
Avatar
Person or organisation; Thai initials supported.
Table
Tabular data with tabular numbers.
Breadcrumb
Location within the app hierarchy.
Toast (Sonner)
Async feedback after an action.
Alert
Inline, persistent message in the page.
Progress
Determinate progress toward a goal.
Skeleton
Placeholder while content loads (> 300ms).
Separator
Visual divider.
Chart
Recharts wrapper themed with --chart-* tokens.
Sidebar
App navigation; see the App Shell block.
IconEcsight
Solar icon with animated Linear → Bold swap for state.
LogoEcsight
Ecsight mark (#0056FF) and mark + wordmark lockup.
KbdEcsight
Keyboard keys and shortcuts (⌘K, G แล้ว O).
Status BadgeEcsight
Record status: dot + label, 5 tones; `live` pulses for in-progress states.
Multi SelectEcsight
Pick several values; chips in the trigger, search, groups, select all / clear.
File DropzoneEcsight
Drag/drop/paste upload with per-file progress, errors, retry and rejection reasons.
StepperEcsight
Progress through a multi-step flow; jump back to completed steps.
TimelineEcsight
Activity feed / order history with relative Thai time.
SpinnerEcsight
Indeterminate loading inside buttons and toasts.
Animated NumberEcsight
KPI value that counts up when it enters view.
Count BadgeEcsight
Unread / cart counts on icons.
Empty StateEcsight
Nothing to show — explain why and offer a next step.