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之类的工具集成为分析。

---

感谢您的阅读！如果您喜欢该项目，请考虑离开星星以支持其持续发展。

和平！

---