kilah ui

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遊樂場的偷看：

在左側，您可以定義斷點，在右側，可以在演示和代碼之間切換。此外，您可以在HTML/JSX之間切換，並查看該組件使用的組件或尾風配置。

有一個搜索欄可以通過關鍵字查找組件 - 儘管我承認命名組件不是我的最強觀點嗎？

即將到來的功能

• 黑暗/光模式支持：不僅針對網站，而且針對每個組件。
• 請求組件功能：用戶可以根據設計想法請求組件。
• 分析：計劃將諸如Porsthog之類的工具集成為分析。

---

感謝您的閱讀！如果您喜歡該項目，請考慮離開星星以支持其持續發展。

和平！

---