คอมโพเนนต์ทั้งหมด

Layout

Container, Stack, Cluster, Grid และ Separator จัดระยะด้วยโทเคน

ui/layout.tsxServer safe

Stack

เรียงแนวตั้งด้วยระยะจากสเกล space ใช้สำหรับฟอร์ม เนื้อหาในการ์ด และส่วนต่างๆ ของหน้า

Header

Body

Footer

tsx

<Stack gap="md">
  <Header />
  <Body />
  <Footer />
</Stack>

เรียงแนวนอนแล้วขึ้นบรรทัดใหม่เมื่อพื้นที่ไม่พอ เหมาะกับปุ่ม แท็ก และเมตาดาทา

Design

Code

Motion

Thai type

Tokens

A11y

tsx

<Cluster gap="sm" justify="between">
  <Badge>ใหม่</Badge>
  <Button>บันทึก</Button>
</Cluster>

กริดที่เติมคอลัมน์อัตโนมัติ ตั้ง min เป็นความกว้างเล็กสุดของแต่ละคอลัมน์ ไม่ต้องเขียน breakpoint เอง

ช่อง 1

ช่อง 2

ช่อง 3

ช่อง 4

ช่อง 5

ช่อง 6

tsx

<Grid min="180px" gap="md">
  {courses.map(course => <CourseCard key={course.id} {...course} />)}
</Grid>

ส่วนบน

บทเรียนแบบฝึกหัดชุมชน

tsx

<Separator />
<Cluster><span>บทเรียน</span><Separator orientation="vertical" /><span>แบบฝึกหัด</span></Cluster>

Prop	Type	Default	คำอธิบาย
`Container.size`	`"sm" \| "md" \| "lg" \| "xl"`	`"lg"`	ความกว้างสูงสุด 640 / 880 / 1280 / 1520 px พร้อมระยะขอบตามจอ
`Stack.gap / Cluster.gap`	`"0" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`md / sm`	ระยะห่าง 0, 4, 8, 16, 32, 64 px
`Stack.align / Cluster.align`	`"start" \| "center" \| "end"`	`-`	จัดแนวแกนรอง
`Cluster.justify`	`"between" \| "center" \| "end"`	`-`	จัดแนวแกนหลัก
`Grid.min`	`string`	`"240px"`	ความกว้างเล็กสุดก่อนขึ้นแถวใหม่
`as`	`ElementType`	`"div"`	เปลี่ยนแท็ก เช่น section, ul, nav

ควรทำ

ไม่ควรทำ