kilah uiダウンロード-Kilah kilah uiソースコードのダウンロード

kilah ui

その他のソースコード

KilahUI is born

ダウンロード

キラフイ|無料およびオープンソース|シームレスな適応性を備えたウェブサイトをより速く構築します

キラフイ

KilahuiはHyperui.devに触発されています。それを発見してから、私はアイデアがどれほど素晴らしいかに感銘を受け、自分のバージョンの作成に着手しました。

このプロジェクトはオープンソースですので、コンポーネントを自由に提供してください！ CONTRIBUTING.mdのガイドを読むか、公式Webサイト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

カスタムカラー

私が違ったやり方でやろうとした最初のことの1つは、カスタムカラーを使用することでした。なぜ？テーマに合わせてTailWindCSSコンポーネントライブラリの色を変更することがよくありました。それで、私はキラフイが体験を向上させるためにカスタマイズ可能な色を提供することを決めました。

ShadCNとその色宣言へのアプローチに触発されたキラフイには、簡単なダークモードのサポートも含まれています。以下は、使用されるデフォルトのパレットです。

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