Examples
Shared layout route for all pages under /example.
Components
แยกเป็น Global (ใช้ได้ทั้งแอป) และ Local (ผูกกับ feature)
Global
@/components/ui
Button
Variants
Sizes
xs
sm
md (default)
lg
xl
States
TextInput
Default
With label
With value
Error
This field is required
Disabled
PasswordInput
Default
With label
Error
Too short
Disabled
NumberInput
Default
With label
With value
Disabled
Select
Default
With label
Clearable
Disabled
DatePickerInput
Default
With label
Clearable
Disabled
Textarea
Default
With label
Auto size
Disabled
Checkbox
withBorder + subTitle (card)
Radio
withBorder + subTitle (card)
PinInput
Length 4
Length 6
Masked
Error
Invalid OTP code
Disabled
QrCode
Basic
Copyable
Long URL
Image
objectFit
cover
contain
fill
none
rounded
default (md)
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-full
badge
With badge
Badge + rounded-lg
overlay — icon
overlayIcon
overlay — count
overlayCount=1
overlayCount=3
overlayCount=10
Fallback (no src)
No src → blank.png
ImageInput
Square (default)
รูปหน้าร้าน *
Add image
Avatar
Wide (width/height)
Add image
SearchInput
ChipFilter
CountTabs
TagSelect
เลือกทีละตัว → กลายเป็น tag ลบได้ด้านล่าง
EmptyState
No data found
ยังไม่มีร้านค้าในรายการ
ErrorState
Something went wrong
โหลดข้อมูลไม่สำเร็จ
variant="compact"
โหลดข้อมูลไม่สำเร็จ
PageLoader
InfoCard + InfoRow
InfoCard = shell การ์ดข้อมูล · InfoRow = แถว label/value read-only (ประกอบเป็น children); value ว่าง → แสดง "-"
ข้อมูลร้านค้า
ชื่อร้าน
ร้านวัสดุก่อสร้าง เชอร่า
สาขา
สาขาลาดพร้าว
เบอร์โทร
02-123-4567
อีเมล
-
ActionBar
แถบปุ่ม action ปักท้ายเพจ (ตัวอย่างครอบกรอบจำลองความกว้างเพจ)
FilterDrawer
Modals
Local · Sale
@/components/pages/app/line/sale
PageGreeting
สวัสดี, คุณวิไลวรรณ
รายการร้านค้า
รายการร้านค้า (ไม่มี greeting)
StoreCard
Full
No image / contact
StoreCardSkeleton
Local · Line
@/components/pages/app/line
PinModal
Phone OTP
Email OTP