kilah ui

Kilahui | GRATIS & Open Source | Bangun situs web Anda lebih cepat dengan kemampuan beradaptasi yang mulus

Kilahui terinspirasi oleh Hyperui.dev . Sejak menemukannya, saya dikejutkan oleh betapa briliannya idenya dan memulai membuat versi saya sendiri.

Proyek ini adalah open source , jadi silakan berkontribusi komponen Anda! Anda dapat membaca panduan dalam CONTRIBUTING.md atau mengunjungi bagian kontribusi di situs web resmi di kilahui.vercel.app/contribute.

Memulai

Kilahui menggunakan PNPM untuk manajemen ketergantungan. Untuk memulai, jalankan:

pnpm install
pnpm run dev

Proyek berjalan di Next.js v15 , dan struktur direktori adalah sebagai berikut:

 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

Warna khusus

Salah satu hal pertama yang ingin saya lakukan secara berbeda adalah menggunakan warna khusus . Mengapa? Saya sering menemukan diri saya memodifikasi warna dari pustaka komponen TailwindCSS agar sesuai dengan tema saya. Jadi, saya memutuskan Kilahui akan menawarkan warna yang dapat disesuaikan untuk meningkatkan pengalaman.

Terinspirasi oleh Shadcn dan pendekatannya terhadap deklarasi warna, Kilahui juga mencakup dukungan mode gelap yang mudah. Di bawah ini adalah palet default yang digunakan:

 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" ,
} ,

Setiap komponen menawarkan berbagai palet untuk menunjukkan fleksibilitas.

Tempat bermain

Inilah intip dari taman bermain Kilahui :

Di sebelah kiri, Anda dapat mendefinisikan breakpoint, dan di sebelah kanan, Anda dapat beralih antara demo dan kode. Selain itu, Anda dapat beralih antara HTML/JSX dan melihat komponen atau konfigurasi tailwind yang digunakan oleh komponen itu.

Ada bilah pencarian untuk menemukan komponen dengan kata kunci - meskipun saya akui komponen penamaan bukanlah poin terkuat saya?

Fitur yang akan datang

• Dukungan mode gelap/terang : Tidak hanya untuk situs web, tetapi untuk setiap komponen secara individual.
• Fitur Permintaan-Komponen : Pengguna dapat meminta komponen berdasarkan ide desain.
• Analytics : Berencana untuk mengintegrasikan alat seperti Posthog untuk Analytics.

---

Terima kasih sudah membaca! Jika Anda menikmati proyek ini, pertimbangkan untuk meninggalkan bintang untuk mendukung pengembangannya yang berkelanjutan.

Damai!

---