Component Library
24 TOPUP · TemplUI + Tailwind CSS v4 · Stack: Go + templ
Color Tokens
TemplUI semantic tokens (themes.css) + Tailwind built-in + input.css brand
Brand
--primary
#7c3aed · themes.css
pink-500
#ec4899 · Tailwind
.bg-grad
135deg · input.css
--secondary-fg
#5b21b6 · themes.css
amber-500
#f59e0b · Tailwind
emerald-500
#10b981 · Tailwind
brand-line
#06c755 · input.css
--destructive
#ef4444 · themes.css
Surface
--background
#f5f3ff
--card
#ffffff
--muted / --secondary
#ede9fe
--border / --input
rgba(124,58,237,.14)
Text
--foreground
#1a0533
--accent-foreground
#4c2d82 · themes.css
--muted-foreground
#9d7ec9
TemplUI → 24 Topup mapping
--primary → #7c3aed · --primary-foreground → #ffffff
--secondary → #ede9fe · --secondary-foreground → #4c2d82
--muted → #ede9fe · --muted-foreground → #9d7ec9
--background → #f5f3ff · --card → #ffffff · --foreground → #1a0533
--border → rgba(124,58,237,.14) · --ring → #7c3aed
Typography Scale
Prompt · Light 300 / Regular 400 / Medium 500
h3เติมเกม48px Bold
mobile 37px
h4เติมเกม34px Bold
mobile 28px
h5เลือกแพ็กเกจ24px Bold
mobile 20px
h6ยืนยันการเติมเกม20px SemiBold
Sub1User ID · 123456789016px Medium
Sub2body text หลัก — ข้อมูลทั่วไป14px Regular
Captionlabel · meta · hint text12px Regular
Shadow & Glow
Tailwind shadow: shadow-sm · shadow-md · shadow-lg · ring for focus
shadow-sm — card rest
shadow-md — hover
shadow-lg — modal
ring — focus/selected
Spacing & Radius
radius-sm · 10px
radius-md · 14px
radius-lg · 18px
pill · 999px
Button
TemplUI Button · variant: default · outline · secondary · ghost · grad (custom) · sizes: sm · default · lg
Variants
grad
gradient fill · custom variant
default
bg-primary
outline
border · bg-card
secondary
bg-secondary
ghost
no border · no fill
disabled
opacity-50
Sizes
sm · h-8
default · h-9
lg · h-10
pill
outline sm pill
Full Width (submit)
Social Auth
Badge
TemplUI Badge · default · secondary · outline · destructive + 24Topup custom color variants
TemplUI Default Variants
primary
default
secondary
secondary
outline
outline
destructive
destructive
Color Variants (custom class extension)
ยอดนิยม
violet
ใหม่
pink
best value
gold
ส่วนลด
green
หมดเวลา
red
UID
neutral
Corner Overlay (Package Card)
🔥 HOT
HOT · gradient
⭐ BEST
BEST · gold
Input / Field
TemplUI Input · default · error · disabled · password · with label (Form.Label)
default

กรุณากรอกเฉพาะตัวเลข

error state · aria-invalid
disabled
OTP 6 digits · InputOtp
Tabs
TemplUI Tabs · Tabs.List · Tabs.Trigger · Tabs.Content

เนื้อหาแท็บ "เติมเครดิต"

tabs · 3 items · first active
Card
TemplUI Card · Card.Header · Card.Title · Card.Description · Card.Content · Card.Footer

ยอดเงินกระเป๋า

Credit · อัปเดตล่าสุด 5 นาทีที่แล้ว

฿ 1,250.00

Free Fire

Garena

เลือกแพ็กเกจ Diamond ที่ต้องการ

Dialog / Modal
TemplUI Dialog · static preview · Dialog.Overlay + Dialog.Content

ยืนยันการเติมเกม

กรุณาตรวจสอบข้อมูลก่อนดำเนินการ

เกม: Free Fire
UID: 1234567890
แพ็กเกจ: 100 Diamond
ราคา: ฿ 29.00
dialog · confirm pattern · backdrop overlay
Toast / Snackbar
TemplUI Toast · success · error · info
✅
เติมเครดิตสำเร็จ!
100 Diamond เข้าบัญชีของคุณแล้ว
❌
ธุรกรรมล้มเหลว
ยอดเงินไม่เพียงพอ กรุณาเติมเครดิตก่อน
ℹ️
กำลังดำเนินการ
ระบบกำลังตรวจสอบการชำระเงิน
Alert Banner
TemplUI Alert · Alert.Title · Alert.Description · variant: default · destructive
Skeleton Loader
TemplUI Skeleton · animate-pulse · ใช้เป็น placeholder ระหว่างโหลด
Separator
TemplUI Separator · horizontal · with label
plain · no label
หรือเข้าสู่ระบบด้วย
with label
Label
TemplUI Label · default · required · error · disabled
default
required
error
disabled
Form
TemplUI Form · Form.Item (vertical) · Form.ItemFlex (horizontal) · Form.Description · Form.Message

กรอกตัวเลข 9-12 หลัก จากในเกม

กรุณาเลือก server

✓ พบบัญชี: PlayerName_TH

Form.Item · vertical + error + success · Form.ItemFlex · horizontal
Select Box
TemplUI SelectBox · default · error · disabled
▼
default · with options
▼

กรุณาเลือก server

▼
disabled
Radio
TemplUI Radio · checked · unchecked · disabled
Radio Group
radio group · checked + unchecked + disabled
Checkbox
TemplUI Checkbox · checked · unchecked · indeterminate · disabled
checkbox · checked + unchecked + disabled
Input OTP
TemplUI InputOTP · 6-digit · 4-digit · error state · with separator
·

ส่งรหัสไปที่ 08x-xxx-1234

รหัส OTP ไม่ตรง กรุณาลองใหม่

InputOTP · 6-digit with separator + error state
Switch
TemplUI Switch · on · off · disabled · with label
switch · on + off + disabled
Textarea
TemplUI Textarea · default · error · disabled

0/500 ตัวอักษร

กรุณากรอกรายละเอียดอย่างน้อย 20 ตัวอักษร

textarea · default + error + disabled
Slider
TemplUI Slider · default · with value display · with min/max label
฿ 500
฿ 100 ฿ 5,000
slider · range with value + min/max labels
Breadcrumb
TemplUI Breadcrumb · Nav · List · Item · Link · Separator · Page
breadcrumb · slash separator + chevron separator with icon
Pagination
TemplUI Pagination · Nav · Content · Previous · Next · Link · active/inactive
pagination · full + compact (mobile)
Accordion
TemplUI Accordion · details/summary · border-b · FAQ pattern
วิธีเติมเกมทำอย่างไร? ▼
เลือกเกมที่ต้องการ กรอก User ID เลือกแพ็กเกจ แล้วชำระเงิน ระบบจะเติมเข้าบัญชีของคุณภายใน 3 นาที
รองรับช่องทางชำระเงินอะไรบ้าง? ▼
PromptPay, TrueMoney, Credit Wallet และบัตรเครดิต
ขอคืนเงินได้ไหม? ▼
สามารถขอคืนเงินได้ภายใน 24 ชั่วโมง หากยังไม่ได้ใช้งาน item
accordion · details/summary · FAQ pattern
Collapsible
TemplUI Collapsible · trigger + content · show/hide toggle
รายละเอียดคำสั่งซื้อ
เกม: Free Fire
UID: 1234567890
แพ็กเกจ: 300 Diamond
ราคา: ฿ 79.00
วิธีชำระ: Credit
collapsible · toggle show/hide · order detail pattern
Sheet / Drawer
TemplUI Sheet · side: right (default) · static preview · mobile menu pattern
เมนู
🏠 หน้าหลัก 🎮 เกมทั้งหมด 🎁 โปรโมชัน 📋 ประวัติ 👤 โปรไฟล์
sheet · right drawer · mobile menu pattern
Popover
TemplUI Popover · static preview · content panel with arrow
Credit Wallet
฿ 1,250.00
อัปเดต: 5 นาทีที่แล้ว
popover · bottom placement · with arrow
Tooltip
TemplUI Tooltip · position: top · right · bottom · left · dark style
คัดลอก UID
top
ข้อมูลเพิ่มเติม
bottom
ตั้งค่า
tooltip · top + bottom + right · dark bg
Avatar
TemplUI Avatar · sizes: sm · md · lg · with image · with fallback initials · gradient ring
KN
sm · h-8
KN
md · h-10
KN
lg · h-14
KN
grad ring
👤
emoji
Progress
TemplUI Progress · default · success · warning · danger · sizes: sm · md · lg
กำลังเติมเกม... 60%
เติมเกมสำเร็จ 100%
ยอดเงินเหลือน้อย 25%
พื้นที่เก็บข้อมูล 92%
Sizes
sm · h-1
md · h-2.5
lg · h-4
progress · default + success + warning + danger · 3 sizes
Calendar
TemplUI Calendar · static month view · selected date · today marker
มีนาคม 2026
อา
จ
อ
พ
พฤ
ศ
ส
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
calendar · 15 = selected (primary) · 17 = today (ring)
Date Picker
TemplUI DatePicker · trigger button · opens Calendar in Popover
datepicker · trigger button · with value + placeholder
Copy Button
TemplUI CopyButton · default · copied state · referral code pattern
24TOP-KN2026
default · click to copy
24TOP-KN2026
copied state · success feedback
UID: 1234567890
inline copy · compact
Icon
TemplUI Icon · Lucide SVG · sizes + color · common icons for 24 Topup
Common Icons
home
search
bell
user
wallet
check
x / close
chevron-left
chevron-right
copy
Sizes & Colors
size-4
size-5
size-6
primary
success
destructive
muted
Navbar
24Topup custom · sticky top · logo · wallet chip · menu icon · mobile-first
N
24
🪙 1,250
☰
mobile 390px · logged-in state
N
24 TOPUP
🪙 1,250 Coin
desktop 1280px
Hero Banner
24Topup custom · gradient bg · headline · CTA · full-width banner
🔥 โปรโมชันพิเศษ
เติมเกมได้ทุกที่
ทุกเวลา ทุกเกม
Diamond · Gems · UC · Credits รับทันที ไม่มีขั้นต่ำ
Game Card
24Topup custom · thumbnail + badge overlay · TemplUI Card wrapper · grid layout
🎮
RPG
Free Fire
UID เติม →
⚔️
🔥 HOT MOBA
ROV
UID เติม →
🏆
⭐ BEST
PUBG Mobile
UID เติม →
Package Card
24Topup custom · TemplUI Card · selected state (glow) · HOT/BEST badge
💎
100 Diamond
฿ 29
🔥 HOT
💎
300 Diamond
฿ 79
⭐ BEST
💎
500 Diamond
ประหยัด 15%
฿ 119
Payment Card
24Topup custom · TemplUI Card + radio pattern · selected state · icon + label
🪙
Credit
ยอดเงิน ฿ 1,250.00
✓
📲
PromptPay
สแกน QR จ่ายทันที
🟠
TrueMoney
กรอกรหัส voucher
Section Header
24Topup custom · title + "ดูทั้งหมด" link · inline flex
เกมยอดนิยม
ดูทั้งหมด →
🔥 โปรโมชันร้อน
ดูทั้งหมด →
Trust Bar / Trust Item
24Topup custom · icon + label + value · horizontal strip
⚡
รับทันที
ภายใน 3 นาที
🔒
ปลอดภัย 100%
SSL Encrypted
🎮
100+ เกม
ครบทุกเกมฮิต
🌟
รีวิว 4.9/5
จาก 10,000+ คน
Promo Card
24Topup custom · TemplUI Card · gradient accent + badge + expiry
FREE FIRE 🔥
BONUS 20% หมดใน 2 วัน
ซื้อ Diamond ทุกแพ็กเกจรับโบนัส 20%
Order Summary
24Topup custom · TemplUI Card · line items + total + divider
สรุปคำสั่งซื้อ
Free Fire · 300 Diamond ฿ 79.00
โบนัส Diamond +60 ฟรี
ส่วนลดโค้ด 24TOP20 -฿ 15.80
ยอดสุทธิ ฿ 63.20
Sticky Submit Bar
24Topup custom · fixed bottom · price summary + CTA button · mobile-first
ยอดชำระ
฿ 63.20
sticky bottom bar · mobile
Empty State
24Topup custom · icon + heading + description + optional CTA
📋
ยังไม่มีประวัติ
เติมเกมครั้งแรกของคุณเลย!
🔍
ไม่พบเกมที่ค้นหา
ลองค้นหาด้วยคำอื่น
Step Progress
24Topup custom · horizontal stepper · 3 steps · active state + check
✓
เลือกเกม
2
ชำระเงิน
3
รับ Item
Wallet / Credit
24Topup custom · TemplUI Card · balance display · quick actions
Credit Wallet
🪙
฿ 1,250.00
อัปเดตล่าสุด: 14 มี.ค. 2026
Affiliate Wallet
฿ 85.50
จากรหัสแนะนำ 12 คน