หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Kilahui | ฟรีและโอเพนซอร์ส | สร้างเว็บไซต์ของคุณได้เร็วขึ้นด้วยความสามารถในการปรับตัวได้อย่างราบรื่น

Kilahui

Kilahui ได้รับแรงบันดาลใจจาก Hyperui.dev ตั้งแต่ค้นพบมันฉันรู้สึกประทับใจกับความคิดที่ยอดเยี่ยมและเริ่มต้นในการสร้างเวอร์ชันของฉันเอง

โครงการนี้เป็น โอเพ่นซอร์ส ดังนั้นอย่าลังเลที่จะมีส่วนร่วมส่วนประกอบของคุณ! คุณสามารถอ่านคำแนะนำใน CONTRIBUTING.md หรือเยี่ยมชมส่วนข้อมูลในเว็บไซต์ทางการที่ kilahui.vercel.app/contribute

เริ่มต้น

Kilahui ใช้ PNPM สำหรับการจัดการการพึ่งพา เพื่อเริ่มต้นใช้งาน: 

pnpm install
pnpm run dev

โครงการทำงานบน Next.js v15 และโครงสร้างไดเรกทอรีมีดังนี้: 

 public/
    components/       # Codebase for each component
src/
    app/
        (markdown-pages)/  # Pages that use MDX
        [category]/        # Route for each component
        api/               # Route handler for search
        components/        # Components used by the website
        constants/         # Constants
        context/           # Contexts
        hooks/             # Custom hooks
        lib/               # Modules

สีที่กำหนดเอง

หนึ่งในสิ่งแรกที่ฉันตั้งใจทำแตกต่างกันคือการใช้ สีที่กำหนดเอง ทำไม ฉันมักจะพบว่าตัวเองปรับเปลี่ยนสีจากไลบรารีส่วนประกอบ tailwindcss เพื่อให้พอดีกับธีมของฉัน ดังนั้นฉันตัดสินใจว่า Kilahui จะเสนอสีที่ปรับแต่งได้เพื่อปรับปรุงประสบการณ์

ได้รับแรงบันดาลใจจาก Shadcn และวิธีการในการประกาศสี Kilahui ยังรวมถึงการรองรับโหมดมืดที่ง่าย ด้านล่างนี้เป็นจานสีเริ่มต้นที่ใช้: 

 colors : {
  background : "#ffffff" ,
  foreground : "#d82116" ,
  card : "#ffffff" ,
  "card-foreground" : "#d82116" ,
  primary : "#846bce" ,
  "primary-foreground" : "#e9f1f9" ,
  secondary : "#e0e9f5" ,
  "secondary-foreground" : "#2d3446" ,
  accent : "#e0e9f5" ,
  "accent-foreground" : "#2d3446" ,
  danger : "#e5193e" ,
  "danger-foreground" : "#e9f1f9" ,
  border : "#d1dce8" ,
  input : "#d1dce8" ,
} ,

แต่ละองค์ประกอบมีจานสีต่าง ๆ เพื่อแสดงให้เห็นถึงความหลากหลาย

สนามเด็กเล่น

นี่คือการแอบดู สนามเด็กเล่น Kilahui :

สนามเด็กเล่น Kilahui

ทางด้านซ้ายคุณสามารถกำหนดจุดพักและทางด้านขวาคุณสามารถสลับระหว่างการสาธิตและรหัส นอกจากนี้คุณสามารถสลับระหว่าง HTML/JSX และดูส่วนประกอบหรือการกำหนดค่า tailwind ที่ใช้โดยส่วนประกอบนั้น

สนามเด็กเล่น Kilahui

มีแถบค้นหาเพื่อค้นหาส่วนประกอบด้วยคำหลัก - แม้ว่าฉันจะยอมรับส่วนประกอบการตั้งชื่อไม่ใช่จุดที่แข็งแกร่งที่สุดของฉัน?

คุณสมบัติที่กำลังจะมาถึง

  • การรองรับโหมด Dark/Light : ไม่เพียง แต่สำหรับเว็บไซต์ แต่สำหรับแต่ละส่วนประกอบ
  • คุณสมบัติองค์ประกอบคำขอ : ผู้ใช้สามารถขอส่วนประกอบตามแนวคิดการออกแบบ
  • Analytics : การวางแผนที่จะรวมเครื่องมือเช่น posthog สำหรับการวิเคราะห์

ขอบคุณสำหรับการอ่าน! หากคุณสนุกกับโครงการโปรดพิจารณาออกจากดาวเพื่อสนับสนุนการพัฒนาอย่างต่อเนื่อง

สันติออกไป!

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด