Slate: UI สไตล์ shadcn สำหรับ Laravel ด้วย Blade
ทำความรู้จัก Slate (electrik/slate) ชุด UI สำหรับ Laravel ที่ได้รับแรงบันดาลใจจาก shadcn ทำงานผ่าน Blade และ Tailwind CSS v4 โดยไม่ต้องใช้ React
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Slate เป็นชุด UI สำหรับ Laravel ที่ถอดแบบแนวคิดมาจาก shadcn
- ใช้งานผ่าน Blade และ Tailwind CSS v4 โดยไม่ต้องพึ่งพา React
- ติดตั้งง่ายผ่าน Composer เพียงแพ็กเกจเดียว รองรับ Dark mode
- ปัจจุบันเวอร์ชัน 3.x อยู่ในสถานะ alpha กำลังปรับปรุงเรื่องความเสถียร
หากคุณเคยต้องการระบบคอมโพเนนต์แบบ shadcn ในโปรเจกต์ Laravel แต่มักจบลงด้วยการฝัง React ลงในแอปพลิเคชัน Blade หรือต้องคัดลอกไฟล์คอมโพเนนต์มากมายมาดูแลรักษาเอง นั่นคือช่องว่างที่โปรเจกต์ชื่อ Slate เข้ามาเติมเต็ม
Slate (electrik/slate) คือชุด UI สำหรับ Blade ที่ได้รับแรงบันดาลใจจาก shadcn โดยมาพร้อมกับคอมโพเนนต์แบบ anonymous, ใช้ Tailwind CSS v4, มี design tokens ที่เราเป็นเจ้าของเอง, รองรับโหมดมืด (Dark mode) และฟอร์มที่ทำงานร่วมกับ Livewire ได้อย่างราบรื่น ทั้งหมดนี้รวมอยู่ในแพ็กเกจ Composer เดียว โดยไม่ต้องพิมพ์คำสั่ง npx add หรือใช้งาน React แต่อย่างใด
ในปัจจุบัน เวอร์ชัน 3.x (3.0.0-alpha.4) ยังอยู่ในสถานะ alpha แม้ว่าหน้าตาและโครงสร้างพื้นฐานจะพร้อมใช้งานแล้ว แต่ผู้พัฒนากำลังอยู่ในขั้นตอนการขัดเกลาเรื่องการเข้าถึง (a11y) และความสมบูรณ์ก่อนจะปล่อยเวอร์ชันเสถียร ผู้ใช้งานสามารถทดลองใช้ได้แต่อาจพบเจอบางจุดที่ยังไม่สมบูรณ์นัก
การนำแนวคิดของ shadcn/ui ซึ่งได้รับความนิยมอย่างสูงในฝั่ง React มาประยุกต์ใช้กับ Laravel Blade ถือเป็นทางเลือกที่น่าสนใจสำหรับนักพัฒนาสาย PHP ที่ไม่ต้องการเพิ่มความซับซ้อนของ JavaScript framework ในระบบ ช่วยให้คงความเร็วและเอกลักษณ์ดั้งเดิมของ Laravel ไว้ได้พร้อมกับได้ดีไซน์ที่ทันสมัย
แนวทางแก้ไขปัญหาเรื่อง UI ใน Laravel ปัจจุบันมักจะแบ่งออกเป็นสองแนวทางหลัก แต่ Slate เลือกที่จะแตกต่างออกไป ผู้พัฒนาสามารถติดตั้งผ่านคำสั่ง:
composer require electrik/slate:^3.0@alpha
สำหรับนักพัฒนาที่ต้องการทดลองใช้งาน สามารถศึกษาเอกสารเพิ่มเติมได้ที่เว็บไซต์ทางการของโครงการ หรือเข้าไปร่วมรายงานปัญหาและข้อเสนอแนะได้ทาง GitHub เพื่อช่วยพัฒนาให้เวอร์ชันเสถียรมีความสมบูรณ์ยิ่งขึ้น
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น