Chainlift/liftkit

これは何？

主な機能

• 01レイアウトや配色のベストプラクティスに沿ったスケーリング、間隔、色の設計式。
• 02Next.jsプロジェクトにLiftKitの設定ファイルを作成するCLIコマンド。
• 03すべてのコンポーネント、単一のコンポーネント、またはベースCSSと型定義のみをインストール可能。
• 04未使用のコンポーネントCSSをビルド時に削除。
• 05FigmaとWebflowのテンプレートを同梱。

ユースケース

• 一貫した間隔とカラースケールを使ったNext.jsのUIプロトタイピング。
• Tailwindを使わないプロジェクトで、デザインシステムのアプローチを試す。
• コンポーネントの変数を反映したFigmaファイルを起点にする。

クイックスタート

1. 1

   LiftKitのテンプレートプロジェクトをクローンする

   git clone https://github.com/Chainlift/liftkit-template.git
2. 2

   プロジェクトフォルダーで依存関係をインストールする

   npm install
3. 3

   LiftKitのすべてのコンポーネントとスタイルをインストールする

   npm run add all

使う前に知っておきたいこと

• !READMEには、本番環境での使用は推奨されず、現在書き直し中と記載されています。
• !現在はNext.jsのみをサポートしており、Tailwindには対応していません。
• !セットアップにはNode.js、npm、Gitが必要です。また、READMEには2026年3月時点で書き直しの進捗が約50%と記載されています。

トピック

よくある質問

liftkit とは？

スケーリング、間隔、色の設計式を基盤とするCSSファーストのUIコンポーネントフレームワーク。現在はNext.jsに対応しており、本番利用にはまだ推奨されていません。 LiftKitは、スケーリング、間隔、色に関するプラットフォーム非依存の設計式を中心に構築されたUIフレームワークです。光学的な対称性、比例に基づく間隔、滑らかなカラースケールなどのルールを適用し、視覚的にバランスの取れたUIを作ることを目指しています。そのため、デザインの専門知識がない開発者でも一貫した仕上がりを得られます。

liftkit は無料で使えますか？ライセンスは？

liftkit は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

liftkit は今もメンテナンスされていますか？

活発にメンテナンス中。liftkit の最終コミットは 2026年10月26日 です。

liftkit は何に使えますか？

一貫した間隔とカラースケールを使ったNext.jsのUIプロトタイピング。 Tailwindを使わないプロジェクトで、デザインシステムのアプローチを試す。 コンポーネントの変数を反映したFigmaファイルを起点にする。

liftkit のインストール方法は？

LiftKitのテンプレートプロジェクトをクローンする: git clone https://github.com/Chainlift/liftkit-template.git プロジェクトフォルダーで依存関係をインストールする: npm install LiftKitのすべてのコンポーネントとスタイルをインストールする: npm run add all

liftkit はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Chainlift/liftkit