TailAdmin เป็นเทมเพลตแดชบอร์ดผู้ดูแลระบบแบบโอเพ่นซอร์สฟรีที่สร้างบน React และ Tailwind CSS ช่วยให้นักพัฒนามีทุกสิ่งที่จำเป็นในการสร้างแบ็คเอนด์ แดชบอร์ด หรือโซลูชันแผงผู้ดูแลระบบที่ครอบคลุมและขับเคลื่อนด้วยข้อมูลสำหรับโครงการเว็บที่กำลังจะมีขึ้น
ด้วย TailAdmin คุณจะสามารถเข้าถึงส่วนประกอบ UI แดชบอร์ด องค์ประกอบ และเพจที่จำเป็นทั้งหมดที่จำเป็นในการสร้างแดชบอร์ดหรือแผงผู้ดูแลระบบที่มีคุณลักษณะหลากหลายและครบถ้วน ไม่ว่าคุณจะสร้างแดชบอร์ดหรือแผงผู้ดูแลระบบสำหรับเว็บแอปพลิเคชันที่ซับซ้อนหรือเว็บไซต์ที่เรียบง่าย TailAdmin เป็นโซลูชั่นที่สมบูรณ์แบบที่จะช่วยให้คุณเริ่มต้นและใช้งานได้อย่างรวดเร็ว
5 แดชบอร์ดที่ไม่ซ้ำใคร: การวิเคราะห์ อีคอมเมิร์ซ การตลาด และ CRM (เพิ่มเติมจะถูกเพิ่ม)
ส่วนประกอบ UI แดชบอร์ดมากกว่า 120+ รายการ
องค์ประกอบ UI ทั้งหมดมากกว่า 200 รายการ
ไฟล์ HTML มากกว่า 45 ไฟล์
องค์ประกอบและไฟล์สำคัญทั้งหมด
แหล่งที่มาของการออกแบบ Figma แบบเต็ม - ตามที่แสดงในการสาธิต
1 แดชบอร์ดที่ไม่ซ้ำใคร
ส่วนประกอบ UI แดชบอร์ดมากกว่า 30 รายการ
องค์ประกอบ UI ทั้งหมด 50+ รายการ
ไฟล์ HTML มากกว่า 10 ไฟล์
การสนับสนุน TypeScript
องค์ประกอบและไฟล์ UI Kit พื้นฐาน
แหล่งที่มาของการออกแบบ Figma - ตัวอย่างฟรี
เทมเพลตแดชบอร์ด TailAdmin React ที่ใช้ Tailwind CSS เป็นจุดเริ่มต้นที่ออกแบบไว้ล่วงหน้าสำหรับการสร้างแดชบอร์ดบนเว็บโดยใช้ไลบรารี React JavaScript และเฟรมเวิร์กที่เน้นยูทิลิตี Tailwind CSS เป็นอันดับแรก เทมเพลตแดชบอร์ด Tailwind CSS + React นี้สร้างโดยใช้ Tailwind CSS และ มีส่วนประกอบที่สร้างไว้ล่วงหน้า เช่น เมนูการนำทาง แผนภูมิ ตาราง และแบบฟอร์ม ซึ่งสามารถปรับแต่งและผสานรวมเข้ากับเว็บแอปพลิเคชัน React ขนาดเล็กถึงขนาดใหญ่ได้อย่างง่ายดาย
หากคุณกำลังมองหา แดชบอร์ด React-Tailwind คุณภาพสูง เทมเพลตแผงผู้ดูแลระบบ หรือชุด UI TailAdmin จะเป็นตัวเลือกที่สมบูรณ์แบบสำหรับคุณ!
คุณจะต้องติดตั้ง Node.js >=v14.16+ (เวอร์ชันที่แนะนำ) (NPM มาพร้อมกับเวอร์ชันดังกล่าว) และ TailAdmin ใช้ Vite สำหรับเครื่องมือส่วนหน้า เพื่อทำการติดตั้งและสร้างเวอร์ชันที่ใช้งานจริง โปรดทำตามขั้นตอนเหล่านี้จากด้านล่าง:
ใช้เทอร์มินัลและนำทางไปยังรูทโปรเจ็กต์ (tailadmin-react)
จากนั้นรัน: npm install
จากนั้นเรียกใช้ : npm run dev
ตอนนี้ในเบราว์เซอร์ไปที่ localhost:5173
สำหรับ Production Build Run : npm run build
ไดเร็กทอรีเอาต์พุต build เริ่มต้น: /dist
คำสั่งนี้จะสร้างโฟลเดอร์ dist เป็น build ในรูทของเทมเพลตของคุณซึ่งคุณสามารถอัปโหลดไปยังเซิร์ฟเวอร์ของคุณได้
React และ Tailwind เป็นสองเทคโนโลยียอดนิยมที่ทำให้โลกการพัฒนาเว็บต้องตกตะลึง React เป็นไลบรารี JavaScript สำหรับสร้างอินเทอร์เฟซผู้ใช้ ในขณะที่ Tailwind เป็นเฟรมเวิร์ก CSS ที่เน้นยูทิลิตี้เป็นหลัก ซึ่งทำให้ง่ายต่อการจัดสไตล์เว็บแอปพลิเคชัน TailAdmin React นำเสนอ Essential React + ส่วนประกอบ UI ของ Tailwind CSS UI มากกว่า 200 รายการที่คุณคัดลอกวางและใช้กับโปรเจ็กต์แดชบอร์ดของคุณ ซึ่งรวมถึง - แผนภูมิ กราฟ แถบนำทาง แท็บ ปุ่ม การ์ด ตาราง โปรไฟล์ แท็บ แบบฟอร์ม โมดอล หน้าแอป ปฏิทิน เทมเพลตตัวอย่างเว็บแอป และอื่นๆ... สำหรับ React และจัดสไตล์โดยใช้ Tailwind CSS
การเพิ่มประสิทธิภาพ 01: ลบการซ้ำซ้อนของ DefaultLayout ในทุกหน้า
การเพิ่มประสิทธิภาพ 02: เพิ่ม ClickOutside Component เพื่อลดการทำงานซ้ำในข้อความส่วนหัว การแจ้งเตือน และเมนูแบบเลื่อนลงของผู้ใช้
การเพิ่มประสิทธิภาพ 01: รวม flatpickr ใน [Date Picker/Form Elements]
การเพิ่มประสิทธิภาพ 02: เปลี่ยนสีหลังจากเลือกตัวเลือก [เลือกองค์ประกอบ/องค์ประกอบแบบฟอร์ม]
การเพิ่มประสิทธิภาพ 03: ทำให้ทำงานได้ [เลือกหลายรายการแบบเลื่อนลง/องค์ประกอบแบบฟอร์ม]
การเพิ่มประสิทธิภาพ 04: ทำให้สามารถแก้ไขได้คุ้มค่าที่สุด [ตารางราคาที่หนึ่ง/ตารางราคา]
การเพิ่มประสิทธิภาพ 05: จัดเรียงโครงสร้างโฟลเดอร์ใหม่
เพิ่ม Typescript ใน TailAdmin React
การเปิดตัว TailAdmin React ครั้งแรก